Flutter 퀴즈앱 만들기 - 입문 (for MAC) (1) 개발환경테스트

플러터는 Dart 라는 언어 하나로 IOS,Android,Web 을 개발할수 있는 UI 프레임워크 입니다.

얼마나 편하게 개발할 수 있는지 Udemy 강의 하나 들어보면서 Flutter 퀴즈앱을 만들어보고 찍먹(?)만 해보려고 합니다.

 

 💡 개발환경 설정

https://docs.flutter.dev/get-started/install

Install

 

위 공식 사이트에서 플러터의 설치에 관한 내용을 볼 수 있으며 Editor는 안드로이드스튜디오를 쓰라고 되어있으나 저는 좀 더 가볍게 사용할 수 있는 VsCode를 사용하겠습니다.

 

플러터에 관한 개발환경 설정은 이번 글의 주제가 아니기 때문에 flutter doctor 를 입력했을때 아래와 같이 모두 초록불이 나오면 개발환경설정은 끝이 납니다. 

 

🚀  개발 시작! 

먼저 프로젝트를 생성할 폴더로 이동합니다.  

그 다음 아래 명령어를 통해 프로젝트폴더를 생성합니다.

 flutter create quiz_app

 

다음 명령어를 통해 아이폰 시뮬레이터를 열어줍니다. 디폴트로 아이폰13으로 되어있네요.

 

open -a Simulator

 

VsCode를 열고 quiz_app 폴더를 열어줍니다. 아래 아이콘 표시라던지 폴더가 조금 다를 수 있는데 플러그인을 따로 설치하시면 됩니다.아래와 같이 폴더 구조가 굉장히 복잡한데 간단하게 설명드리자면 .dart_tool 이나 .idea 는 자동으로 관리되는 폴더로 개발자가 조작할 필요는 없습니다. android,ios도 역시 빌드의 결과물로서 개발자가 조작하지 않습니다. lib 폴더에 있는 main.dart가 핵심입니다. 일단 이번 글에서는 pubspec.yaml과 lib 폴더만 가지고 개발해보겠습니다.

 

 

현재 설치된 플러그인은 아래와 같습니다. 다 설치할 필요는 없습니다. 왼쪽 메뉴에서 "확장" 버튼을 클릭후 아래 3개 정도만 설치하면 됩니다.

• Dart
• Flutter
• Material Icon theme (아이콘)

 

이제 실행한번 해보겠습니다.  " 실행 -> 디버깅 없이 실행 " 을 클릭합니다.

 

축하합니다! 첫번째 플러터 실행에 성공하였습니다. 여기서 중요한 기능이 한가지 있습니다. 바로 코드를 수정하면 바로 반영이 된다는 것입니다. lib/main.dart 파일에서 title 부분을 한번 바꿔봅시다. 그러면 뭔가 리로드 되었다고 디버그 콘솔에 나타납니다. 참고로 아래 터미널이 안보이면 " 터미널 -> 새터미널 " 클릭하면 됩니다.

 

다음 2편에서는 플러터 퀴즈앱을 본격적으로 만들어 보겠습니다.