[플러터]퀴즈 앱 - (1) 프로젝트 생성

 

플러터가 컴퓨터에 설치되어있다고 가정을 하고 진행을 하겠습니다

설치가 아직 안되셨다면
https://flutter-ko.dev/docs/get-started/install 을 참고해주세요

개발환경은 VS Code에서 진행되는데 Android Studio랑 크게 차이점은 없습니다

먼저 프로젝트를 생성할게요

vs code : command palette (cmd + shift + p)를 호출하고 flutter를 입력하시면

프로젝트 명은 원하시는것으로 정해주면 되는데 저는 quiz_app으로 정했습니다

조그만 기다리시면...

이렇게 폴더와 파일이 만들어졌으면 프로젝트 생성이 끝난겁니다.

이제 디버깅 모드로 실행 해볼게요! (재생버튼에 작은 벌레가 달려있는 버튼을 눌러주세요)

여기서 약간 해매시는 분들을 플러터 공식 문서를 한번 확인해주세요

vs code : https://flutter-ko.dev/docs/get-started/test-drive?tab=vscode#create-app

안드로이드 스튜디오 : https://flutter-ko.dev/docs/get-started/test-drive?tab=androidstudio#create-app

본격적으로 퀴즈앱을 만들기전에 Flutter 자체에 대해서 한번 언급하고 할게요

모든것이 위젯!

프로젝트를 생성하면 기본으로 만들어지는 counter 앱을 봐볼게요

여기서 UI 구성요서 하나하나가 다 widget입니다

 

이렇게 빨간색 테두리 안에 있는 요소들이 다 Widget이라고합니다.

대부분의 경우 위젯은 다른 위젯을 포함하고 있습니다
이러한 구조를 Widget Tree라고합니다

debug tool을 이용하여 구체적으로 살펴보자면 (디버깅 툴에 대한 자세한 얘기는 여기에)

이때 한가지 팁!

디버깅 툴에서 select widget mode를 이용하면

해당 위젯을 클릭하면 어떤 위젯인지 화면상 위치 그리고 코드상 위치도 알려줘요!

자, 이렇게 모든게 다 위젯으로 만들어졌다는 기본 컨셉을 확실히 이해했으면, 본격적으로 퀴즈앱 만들기에 들어가겠습니다.

밑바닥에서

lib 폴더 내에있는 main.dart파일에 있는 모든 코드를 지워볼게요

그리고 main 함수를 만들어줄게요
main 함수는 처음으로 실행되는 코드인데, 여기에 저희의 앱에 대한 코드를 넣어 줘야겠네요

void main() {

}

MyApp이라는 클래스를 만들고 이친구는 위젯을 상속받게 할겁니다.
위젯은 Statelesswidget과 Statefulwidget 두개가 있는데, Statelesswidget를 상속받게 할게요
(stateless 와 statefull의 차이는 나중에 더 자세히 다룰게요!)

vs code는 친절히 자동완성을 해주고 어느곳에서 import를 해줄지도 추천해줍니다!
이번 예제에서는 package:flutter/material.dart에서 import를 해오는걸로 할게요

enter를 누르면

import 'package:flutter/material.dart';

void main() {

}

class MyApp extends StatelessWidget {

}

하지만 아직도 VScode가 에러를 표시하네요

에러 메시지를 살펴보면, build라는 method를 구현해야하는데 저희는 아직 구현이 안되어있죠?

친절한 VScode의 도움을 받아보기위해 quick fix를 누르고 create 1 missing override 를 눌러줍니다

 

 

 

짠! 긴 코드가 자동으로 생성되었는데, 어떤 뜻인지 한번살펴볼까요?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }

}

build라는 함수가 있는데, 리턴 하는 것은 위젯이네요.
저희는 App 위젯을 return하려하는데, 엄밀히 말하면 플러터의 material 디자인으로 꾸며진 MaterialApp입니다

그리고 이 함수는 BuildContext라는 값을 paratmeter로 받고 있는데, 이친구는 간단하게 말해서 위젯 트리내에 위치한 현재 위젯의 위치 정도로 보면 좋을 것 같아요

https://api.flutter.dev/flutter/widgets/BuildContext-class.html

todo와 throw 부분의 코드를 지우고 return MaterialApp( 을 해주고, 받을수 있는 parameter를 보려는데

MaterialApp의 parameter는 엄청 많네요...!

이중에서 home 파라미터에 Text를 추가해볼게요 (Text도 위젯입니다! 느낌상 화면에 텍스트를 띄워주는 친구겠죠?)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Text("HELLO WORLD!"));
  }
}

이제 마지막으로 main 함수에 myapp이 실행되게 해야겠죠? 이때 runApp 함수를 이용합니다.

void main() {
  runApp(MyApp());
}

그리고 run을 해서 시뮬레이터에 띄우면??

네 엄청 못생겼죠😅. 아직 저희는 꾸미는거는 안햇으니까!

다음 글부터는 조금더 꾸미는거에 집중해볼게요!