[스파르타코딩클럽] 플러터(Flutter)로 시작하는 앱개발 종합반 - 1주차 개발일지 ②

3. Flutter 이해하기

flutter는 모든 것이 위젯(Widget)으로 만들어져 있다. 
위젯은 레고 블럭과 같이 앱을 만드는데 사용되는 작은 모듈이다. -> 위젯 트리

 

Material widget - android

Cupertino widget - ios

-> 위젯 중 어떤 방법을 사용하든 사용성만 해치지 않는다면 앱을 출시할 수 있다.

4. 프로젝트 준비

flutter 폴더 준비 : 앞으로 만들어볼 앱 프로젝트를 모아둘 폴더 -> 상위폴더 어디에도 한글이 포함되어서는 안된다.

flutter new project : 프로젝트명은 영문과 _만 사용한다.

폴더 구조

1) lib

- 주로 코딩하는 폴더

- flutter 프로젝트는 main.dart 파일을 실행한다.

 

2) pubspec.yaml

- 라이브러리 및 설정을 하는 폴더

- 새로운 것을 깔거나 설정을 변경할 때 수정한다.

VSCode Dart 세팅

View → Command Palette -> Dart: Use Recommended Settings : 저장 시 자동 줄 정렬 기능

Emulator 실행하기

실제 기기가 없어도 테스트를 진행할 수 있는 컴퓨터 상의 가상의 휴대폰

-> 카메라나 apple 로그인과 같이 특정 기능은 불가

5. 로그인 페이지 만들기

scaffold  widget

건물을 지을 때 공사장에 먼저 scaffold를 설치하고 작업을 시작하는 것과 같이 앱에서도 화면을 그릴 때 scaffold widget으로 시작한다.

Scaffold(
    appBar: 다른 위젯, // 상단 바
    body: 다른 위젯, // 화면 중앙에 가장 큰 면적
    bottomNavigationBar: 다른 위젯, // 하단 바
    floatingActionButton: 다른 위젯, // 하단 화면 최상위에 떠있는 버튼
),

 

* hot reload : 저장시 에뮬레이터에 바로 반영되는 기능

* 맨뒤에 콤마를 안붙이면 저장시 수평으로 정렬이 되므로 콤마를 붙여야 수직 정렬이 된다.

* 자동 완성 기능 : option + esc

* 리펙터(refactor) : 위젯을 손쉽게 다른 위젯을 감싸거나 추출할 수 있도록 도와주는 기능

* 가상 키보드 : shift + command + k

* 기기별 테스트 패키지 : https://pub.dev/packages/device_preview

device_preview | Flutter Package

로그인 페이지 완성!

 

6. Flutter 공부 방법

1) 어떤 위젯이 있는지 살펴보기

https://docs.flutter.dev/ui/widgets

Widget catalog

2) 에러 메시지 잘 읽고 구글링 잘하기

핵심 메시지(가장 위, 다른 색)

3) 커뮤니티 가입하기 

트랜드 파악 및 최근 이슈

4) 프로그래밍 언어 다트 배우기

문법을 이해하고 읽는 법, 실행 순서