Flutter 기초 다지기

프로젝트 구조 살펴보기

• lib 폴더: Dart 소스코드를 작성하는 곳

• test 폴더 : Dart 코드를 테스트하기 위한 코드를 작성하는 곳

• android, ios, linux, macos, web, windows 폴더 : 플러터 프레임워크 만으로는 할 수 없는 네이티브 기능을 사용하기 위해 각각 플랫폼별 네이티브 코드를 작성하는 곳 (예: 디바이스의 GPS 사용 등)

• pubspec.yaml : 이 파일 내에 pub.dev의 패키지들을 추가하여 사용 할 수 있음. 앱 내에서 사용한 이미지 및 폰트 파일들의 위치를 선언.

• pubspec.lock : pubspec.yaml 파일에 패키지를 추가 후 패키지 버전을 기록해두는 곳. 패키지 추가 시 자동으로 구성됨.

• .gitignore : git repository에 올리지 않아도 되는 파일을 명시해두는 곳. API 키 파일이나 IDE의 설정 파일 등 노출되어서는 안되는 파일들을 추가해 놓는 용도.

패키지

사용하는 방법

1. (권장) flutter pub add 패키지명 명령어 이용

2. pubspec.yaml 파일 dependencies 항목 아래 패키지명: 버전 넘버 형식으로 작성 (들여쓰기 주의)

main.dart 살펴보기

Widget

• UI를 구성하는 기본 요소

• 버튼, 아이콘, 글자, 이미지 등

• Widget들을 모아서 하나의 위젯으로 만들기도 함

• StatelessWidget과 StatefulWidget이 있으며 build 함수 내에서 구성을 dart코드로 작성
• StatelessWidget : 변화가 필요없는 화면을 구성할 때 사용하는 위젯 클래스. build 메서드는 한 번만 호출된다.



▲ 예를 들면 로고. 클릭하면 home으로 연결되는 ‘기능’은 있지만, 변화하지는 않는다.
• StatefulWidget: 화면 구성이 상태에 따라 재구성되어야 할 때 사용. SFW의 상태 변경은 setState 메서드를 통해 변경해야 한다. 플랫폼은 setState 메서드가 호출될 때마다 build 메서드를 재호출하여 화면을 다시 그린다.



▲ 예를 들면 장바구니에 수량 담는 것. 클릭할 때마다 숫자가 올라가야 한다. = 화면을 다시 그려야 한다. = build 메서드가 재호출된다.

MaterialApp이란?

• 앱의 기본적인 구조와 디자인을 잡아주는 위젯

• 페이지가 전환되는 애니메이션, 기본 버튼의 디자인 등

• Flutter 앱의 최상단에 선언해 사용

MaterialApp vs CupertinoApp

• MaterialApp: 구글 디자인

• CupertinoApp: Apple 디자인

Scaffold

• Scaffold : 각 페이지의 구조를 잡아주는 위젯 — cf. MaterialApp : 앱의 기본적인 구조와 디자인을 잡아주는 역할

• AppBar, BottomNavigation, FloatingActionButton 등의 구조를 제공

• 페이지의 주 요소는 body 속성에 선언해 사용