본문 바로가기
스파르타 코딩 클럽 내일배움캠프 6기/TIL

[📅 2025.03.04] Day 2: Flutter UI 위젯 & 앱 화면 구성

by 앱 창업 부트캠프 2025. 3. 4.

📅 총 16강 (3시간 35분)

1. Stateful & Stateless 위젯 이해

  • StatelessWidget: 변하지 않는 UI 구성
  • StatefulWidget: 사용자 입력 및 상태 변화 감지

2. 주요 뷰(View) 위젯 학습

  • PageView: 페이지 넘기기 (스와이프 가능)
  • ListView: 스크롤 가능한 리스트 UI
  • GridView: 격자형 UI
  • TabBarView: 탭 기반 UI

3. 레이아웃 구성 위젯 학습

  • Container: 크기, 색상, 배경 설정 가능
  • SizedBox: 여백 및 크기 조정
  • Row & Column: 가로/세로 정렬
  • Expanded: 공간을 유동적으로 조정
  • Stack & Positioned: 겹쳐진 UI 구현

4. 기능성 위젯 학습

  • GestureDetector: 터치 이벤트 감지
  • AnimatedContainer: 애니메이션 적용
  • Hero: 화면 전환 애니메이션

5. 대표적인 앱 UI 분석 및 구현

  • 틱톡, 스레드, 알람 앱 UI 분석
    • AppBar, BottomNavigationBar 분석
    • ListView를 활용한 무한 스크롤 구조
    • GestureDetector를 활용한 인터랙션
    • PageView를 사용한 슬라이드 방식
  • 알람 앱 & 스레드 앱 위젯으로 구현
    • SingleChildScrollView, Column, ListView 활용
    • Stack, Positioned으로 UI 배치
    • Expanded 및 Flexible로 동적 크기 조정

📌 전체 정리

Day 1: Flutter 기본 개념, Dart 문법, 개발 환경 설정
Day 2: 주요 UI 위젯 학습 및 앱 UI 구성 실습

📌 다음 학습 목표:

  • Flutter 상태 관리 (State Management) 학습
  • Provider, setState(), Riverpod 등을 활용한 동적 UI 개발