1. <Quiz APP>을 통한 Flutter Tutorial

1. Project Settings

flutter project를 위해선, 먼저 아래와 같은 command-line을 사용해서, project-folder를 생성하도록 하자.

flutter create quiz_app

quiz_app folder에서, assets/images folder를 만든 후에, 원하는 메인 image파일을 저장한다.

• lib/main.dart에서 flutter app을 만들기 위한, 가장 중요한 파일을 불러온다.
• runApp()안에 widget을 불러 넣어야 하는데,

import 'package:flutter/material.dart';

void main(){
  runApp();
}

1.1 Main Widget

위에 언급한데로, 우리는 main() function에 widget을 집어넣어야 한다. 이때, 가장 많이 사용하는 것이, Material App()이라는 것인데, 이는 화면과 관련된 전체적인 관리를 해주는 wideget이라 생각하면 된다. 또한, 이 widget에 구성된 argument은 상당히 다양한 것으로 구성되어 있다.그러나 이러한 모든 argument와 관련된 backbond-widegets들을 main.dart에 집어넣으면 가독성이 떨어지므로,우리는 이를 각기 다른 파일에 적시하여 사용하도록 하자.

MaterialApp이란? MaterialApp 이라는 것은 우리가 앞으로 짜게될 모든 하위 페이지나 구성요소를 최 상단에서 담는 그릇과 같은 존재이다. 더 정확하게 말하자면, _앱의 기본적인 구성 요소 및 레이아웃을 설정하는 데 도움이 되는 여러 속성을 갖는 Flutter 앱의 최상위 위젯_이다.

- home: 앱이 시작될 때 표시되는 기본 화면을 설정

- routes: 앱의 다른 화면으로 이동하기 위한 경로를 설정

- theme: 앱의 전반적인 디자인 및 스타일을 지정하는 테마를 설정

- title: 앱의 제목을 설정 - navigatorKey: 네비게이터를 제어하는 데 사용되는 키를 설정

- onGenerateRoute: 새로운 경로가 요청될 때 호출되는 함수를 설정

#runApp을 return할 때, argument로 Widget이 필요한데, 우리는 MaterialApp Widget을 사용. 
void main(){
  runApp(MaterialApp();
}

1.2 Scaffold Widget

위에서 언급한 Material App은 여러 속성을 가지고 있는데, 이 중 필수 옵션은 home(**앱이 시작할 때,표시되는 기본적인 설정) 이다. 우리는 이러한 기본설정을 위하여, Scaffold widget을 사용할 예정이다.

Scaffold Widget이란? 앱의 기본적인 구조를 나타내는 뼈대를 제공하는 중요한 위젱이다. 이를 통해 앱의 주요 구성 요소를 배치하고 관리할 수 있다. 주요 속성은 아래와 같다.

1.3 Container Widget

하나 이상의 자식widget을 포함할 수 있으며, 색깔 입히기, 위치 및 사이즈 조정등 여러가지 옵션들을 가진 widget이다.

Container Widget이 여러가지 옵션을 가질 수 있을 수 있지만, 우리는 decoration, child, 등을 사용하도록 하자.

여기까지 우리가 한 것을 정리해보자면,

#최상단 widget
MaterialApp
 |-home: Scaffold (앱의 주요 구성등을 위치 및 관리할 수 있음)
           |-body: Container(자식 widget의 색,위치,배열을 관리)
                    |- decoration
                    |- child 

현재까지 구성된 요소를 간략하게 코드로 작성하면 아래와 같다.

void main(){
  runApp(
    MaterialApp(
      home:Scaffold(
        body:Container(
          decoration:,
          child:
        )

    )
    )
  );
}

1.3.1 Container - decoration

Conatiner의 option인 decoration은 단어가 말해주듯, "꾸며주는"것과 관련되어있다. 우리는 그 중에서 BoxDecoration을 사용할 예정이다. BoxDecoration은 box에 색,이미지 삽입, 가장자리 색 지정 등 여러모로 박스와 관련된 class이다.

BoxDecoration에 관련된 더 자세한 정보는 https://yun-seyeong.tistory.com/19 잠조하도록 하자.

void main(){
  runApp(
    MaterialApp(
      home:Scaffold(
        body:Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors:[Color.fromARGB(255, 60, 10, 107),
                      Color.fromARGB(255, 83, 17, 114)],
                      begin:Alignment.topLeft,
                      end:Alignment.bottomRight,
                     )
          ),
          child: null
        )

    )
    )
  );
}

1.3.2 Container - child

중요한 속성들 메시지/이미지등을 넣을 수 있는 곳은 바로 child 옵션이다. 이때, 단순히 하나의 content를 집어넣는 것이 아닌, 여러가지 구성요소들을 담고 싶다면, 주로 사용하는 것이 Column 또는 Row library를 사용할 수 있다. 한번에 많은 Widget options을 담고 있으면, 가독성이 떨어진다. 이를 피하기 위하여, 우리는 다른 파일을 하나 생성하도록 하자.

step 1) start_screen.dart 파일 생성후, 아래의 코드를 집어넣자. 아래의 코드는 기본적으로 우리가 담고 싶은 첫번째 screen의 정보를 담고 있다.

class StartScreen  extends StatelessWidget{
  //constructor
  const StartScreen({super.key});

  @override
  Widget build(context){
    //locate the content at the center of screen
    return Center(
      child: Column(children: [

      ],)
    );
  }

step 2) 초기화면에 그림과 같이 여러 가지(이미지/text box/click box)를 집어넣으려고 해보자.

이를 위해서, 우리는 연관된 코드를 Column의 children 옵션에 집어넣으면 된다. 그림과 같이 나오려면, 아래의 구성요소들이 필요하다.

• child01: Image.asset libary

• child02: SizeBox() 여백 공간을 만들기 위한 library

• child03: Text()

• child04: SizeBox() 여백공간

  • child05: OutlinedButton.icon() 버튼을 누르면, custom 함수를 활성할 수 있도록 도와주는 library

❗노트

우리가 저장한 이미지파일의 위치를 파악할 수 있는 path를 정해야한다. 이를 위해선, 우리는 flutter가 미리 만들어준 "pubspec.yaml"에서, asstes 섹션에 image가 저장한 path를 집어넣어준다.

class StartScreen extends StatelessWidget{
  const StartScreen(this.startQuiz,{super.key});

  final void Function() startQuiz;

  @override
  Widget build(context){
    return  Center(
      child:Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          //child 0

          //child 1
          Opacity(opacity:0.6,
            child:Image.asset(
              "assets/images/quiz-logo.png",
              width:300,
              color: Color.fromARGB(221, 230, 211, 241),

            )
            ),
          //chidl 2
          const SizedBox(height:80),
          //child 3
          const Text(
            "Learn Flutter the fun way!",
            style:TextStyle(
              color:Colors.white,
              fontSize:24),
          ),
        )
        ],

      )
    );
  }
}

step3 OutlinedButton.icon library를 추가한다.

OutlinedButton.icon은 button을 클릭하게 되면 원하는 함수를 실행해주는 역할을 한다. 이때, 주요한 옵션으로는

• onPressed: 누르면 수행할 함수
• style: button 스타일에 관한 전반적인 setting을 담당한다.
• label: button에 쓰여진 text를 담고 있는 option
• icon: 원하는 icon이미지를 넣을 수 있음.

 //child 4
          const SizedBox(height:30),
          //the button to activate function
          OutlinedButton.icon(onPressed:startQuiz, 
          //chiild is no loger used uner QutilineButton.icon; use label
          label: const Text("Start Quiz"),
          icon:const Icon(Icons.arrow_circle_right),
          style:OutlinedButton.styleFrom(
            foregroundColor:Colors.white,
            ),