플러터 총정리 이것이 플러터다.

PDF에 포함된 상세 코드 구조와 위젯 설명을 포함하여, 암기하기 좋은 단정형(~다, ~임) 어미로 다시 정리함.

Flutter 핵심 총정리 노트

1. Flutter의 개념 및 특징

• [cite_start]정의: Google에서 만든 앱 개발 도구임[cite: 3].
• [cite_start]크로스 플랫폼: Dart 언어 하나로 Android, iOS, 웹, 데스크톱 앱을 한 번에 제작함[cite: 3].
• [cite_start]Hot Reload: 코드 수정 후 저장 시 바뀐 부분만 즉시 반영되어 UI 작업 속도가 매우 빠름[cite: 4].

2. 위젯(Widget)

• [cite_start]기본 원칙: 화면의 모든 요소(글자, 버튼, 이미지, 여백 등)는 위젯임[cite: 6].
• [cite_start]위젯 트리: 위젯 안에 위젯이 들어가는 계층 구조를 가짐[cite: 26, 27].
• 위젯의 종류:
  • [cite_start]StatelessWidget: 상태 없는 위젯임[cite: 29]. [cite_start]데이터가 변하지 않을 때 사용하며, 화면을 그리는 build() 메서드만 존재함[cite: 30, 38].
  • [cite_start]StatefulWidget: 상태 있는 위젯임[cite: 44]. [cite_start]화면 변화가 필요할 때 사용하며, 껍데기(HomeScreen)와 실제 내용(_HomeScreenState) 클래스 2개로 나뉨[cite: 45, 60].

3. 프로젝트 폴더 및 파일 구조

• [cite_start]lib 폴더: 우리가 작성하는 모든 코드가 들어가는 폴더임[cite: 19].
  • [cite_start]main.dart: 앱의 시작점이며 가장 먼저 실행됨[cite: 19].
  • [cite_start]screen/: 화면별 파일을 나누어 저장하는 하위 폴더임[cite: 20].
• [cite_start]pubspec.yaml: 프로젝트 설정 파일임[cite: 21].
  • [cite_start]외부 패키지(예: webview_flutter) 및 이미지(assets) 경로를 등록함[cite: 22, 25].
  • [cite_start]수정 후 반드시 Pub get을 눌러야 반영됨[cite: 39, 157].

4. 앱 실행 흐름 (구조)

1. [cite_start]void main(): 앱의 시작점임[cite: 81, 82].
2. [cite_start]runApp(): 괄호 안의 위젯을 화면에 띄움[cite: 62, 83].
3. [cite_start]MaterialApp: 앱 전체 설정(테마, 라우팅 등)을 담당하는 최상위 위젯임[cite: 65, 84].
4. [cite_start]HomeScreen: 앱 실행 시 보여줄 첫 화면임[cite: 75, 85].
5. [cite_start]Scaffold: 상단바(appBar), 본문(body), 하단 버튼(floatingActionButton) 등 화면 뼈대를 제공함[cite: 76, 79, 86].

5. 레이아웃 및 정렬 위젯

• [cite_start]Column: 위젯을 세로로 배치함[cite: 90].
• [cite_start]Row: 위젯을 가로로 배치함[cite: 101].
• 정렬 옵션:
  • [cite_start]mainAxisAlignment(주축): 위젯이 나열되는 방향 정렬임[cite: 116, 119].
  • [cite_start]crossAxisAlignment(교차축): 주축의 반대 방향 정렬임[cite: 117, 128].
  • [cite_start]start, center, spaceBetween(양 끝 배분), spaceEvenly(전체 균등), stretch(늘리기) 등의 값을 사용함[cite: 93, 94, 95, 97, 98, 129].

6. 자주 사용하는 기본 위젯

• [cite_start]SizedBox: height나 width를 주어 빈 공간(여백)을 생성함[cite: 108, 110].
• [cite_start]SafeArea: 기기의 노치 영역이나 하단 홈 인디케이터 영역을 자동으로 피함[cite: 120, 125, 126].
• [cite_start]Center: 자식 위젯을 화면 정가운데에 배치함[cite: 136, 137, 140].
• [cite_start]Text: 화면에 글자를 표시하며 TextStyle로 디자인함[cite: 150, 169].

7. 이미지 및 스타일 관리 기술

• [cite_start]이미지 등록: asset/img/ 폴더 생성 후 이미지를 넣고 pubspec.yaml의 assets 섹션에 경로를 적어야 함[cite: 144, 145, 153, 155].
• [cite_start]테마(Theme): ThemeData를 통해 텍스트 스타일을 한 곳에서 관리함[cite: 162, 164]. [cite_start]Theme.of(context)를 사용하여 상위 테마 정보를 가져옴[cite: 149, 161].
• [cite_start]클래스 분리: 코드 가독성을 위해 화면의 각 부분을 별도의 클래스(예: _DDay, _CoupleImage)로 만들어 조립함[cite: 165, 174, 176].
• [cite_start]데이터 전달: 생성자를 통해 부모 위젯에서 자식 위젯으로 데이터를 전달함[cite: 192, 201, 202].