Today I Learned 18회차 - Flutter 기초 다지기

오늘은 Flutter 프로젝트의 구조와 기본 설정 파일들에 대해 배워보았습니다. 프로젝트 초기 설정의 중요성과 각 파일의 역할을 이해할 수 있었어요!

🎯 학습 목표

• Flutter 프로젝트의 주요 구조와 파일 이해
• 패키지 관리 방법 학습
• MaterialApp과 Scaffold의 역할 파악

📚 학습 내용

1. 프로젝트 구조 살펴보기

Flutter 프로젝트를 생성하면 여러 설정 파일과 디렉토리가 자동으로 생성됩니다. 각 파일의 역할을 이해하는 것이 중요합니다.

주요 설정 파일

analysis_options.yaml

• 코드를 작성하다 보면 가끔씩 IDE에서 파란색, 노란색 등의 밑줄을 뜨는 것을 볼 수 있습니다
• 해당 밑줄은 코드 린트(코드 가이드)에 의해서 띄워주는 것입니다
• 코드의 가독성 및 오류 발생 방지 등을 위해 사용하는 가이드
• 무시해도 되는 규칙 등을 저장해놓을 수 있습니다

.metadata

• Flutter 프로젝트의 속성이 적혀있는 파일
• 프로젝트의 메타데이터 관리

.dart_tool

• 사용된 패키지가 로컬(현재 PC)에 저장된 경로 등을 관리
• Git 저장소에 올라가지 않음

.idea

• 작업 중인 IDE의 프로젝트별 세팅 정보들이 들어가 있음
• dart_tool과 마찬가지로 Git 저장소에 올라가지 않음

.iml

• Android Studio에서 프로젝트의 구성을 관리하기 위한 파일
• Git 저장소에 올라가지 않음

2. 패키지 관리

Flutter에서 패키지는 재사용 가능한 코드 라이브러리입니다. 프로젝트에 필요한 기능을 패키지로 추가하여 개발 효율을 높일 수 있습니다.

패키지 추가 방법

방법 1. pubspec.yaml 직접 수정

• dependencies 섹션에 패키지명과 버전 추가
• flutter pub get 명령어 실행

방법 2. CLI 명령어 사용 (권장)

flutter pub add 패키지명

주의사항

• 직접 추가하는 방식을 사용하게 되면, 현재 자신의 개발환경의 Flutter SDK 버전과 맞지 않는 패키지를 추가하게 되어 패키지 추가를 실패할 수 있습니다
• CLI 명령어를 사용하면 자동으로 호환되는 버전을 찾아 설치합니다

3. main.dart 살펴보기

Flutter 앱의 진입점인 main.dart 파일의 주요 위젯들을 알아봅시다.

MaterialApp vs CupertinoApp

위젯	설명
MaterialApp	Google의 Material Design 적용
CupertinoApp	Apple의 iOS 디자인 적용

Scaffold 위젯

Scaffold란?

• MaterialApp이 앱의 기본적인 구조와 디자인을 잡아준다면, Scaffold는 각 페이지의 구조를 잡아주는 위젯입니다
• 페이지의 기본 레이아웃을 제공하는 위젯

주요 구성요소

• AppBar: 상단 앱 바
• body: 페이지의 주요 콘텐츠 영역
• BottomNavigationBar: 하단 네비게이션 바
• FloatingActionButton: 플로팅 액션 버튼
• Drawer: 사이드 메뉴

💡 핵심 개념 정리

Flutter 앱 구조

MaterialApp (앱 전체 설정)
  └─ Scaffold (페이지 구조)
      ├─ AppBar
      ├─ body (주요 콘텐츠)
      ├─ BottomNavigationBar
      └─ FloatingActionButton

패키지 관리 흐름

패키지 필요 확인
  ↓
flutter pub add 패키지명 (권장)
  ↓
pubspec.yaml 자동 업데이트
  ↓
패키지 다운로드 및 설치

🚀 다음 학습 목표

1. 위젯 트리 이해: 위젯의 계층 구조와 렌더링 과정
2. 상태 관리 기초: StatelessWidget과 StatefulWidget의 차이
3. 레이아웃 위젯: Row, Column, Stack 등 레이아웃 구성 방법