📚 Today I Learned 10회차 - [Flutter] U&I 앱으로 D-Day 계산하기 💕

📖 Flutter D-Day 앱 개발

🎯 학습 목표

• StatefulWidget을 이용한 상태 관리 익히기
• setState 함수 사용법 완전 이해하기
• Cupertino 디자인 시스템 활용하기
• MediaQuery를 통한 반응형 UI 구현하기
• ThemeData를 활용한 일관된 디자인 시스템 구축하기

📚 주요 내용

⭐ 프로젝트 개요

U&I 앱은 사귀기 시작한 날짜를 선택하면 현재까지 며칠이 지났는지 계산해주는 D-Day 앱입니다.

💡 핵심 기능: 날짜 선택, D-Day 계산, iOS 스타일 UI 구현

이번 프로젝트에서 집중할 핵심 요소:

• StatefulWidget을 이용한 상태 관리
• setState 함수 사용 방법
• Cupertino (iOS 스타일) 디자인 시스템
  • Flutter는 2가지 디자인 시스템을 지원합니다
    • 구글의 Material Design (Android 스타일)
    • 애플의 Cupertino Design (iOS 스타일)

⚡ 핵심 개념 1: setState 함수

State를 상속하는 모든 클래스는 setState 함수를 사용할 수 있습니다.

setState 함수 실행 과정:

1. Clean 상태 - 렌더링 완료 상태
2. setState() - 상태 변경 함수 호출
3. Dirty 상태 - 재렌더링 필요 상태
4. build() - 위젯 다시 빌드
5. Clean 상태 - 렌더링 완료

💡 중요: StatefulWidget의 렌더링이 끝나면 Clean 상태가 됩니다. 상태를 변경하려면 반드시 setState 함수를 사용해야 합니다!

setState는 콜백 함수를 받으며, 이 콜백 함수 내부에서 상태 변경 작업을 진행합니다.

⚡ 핵심 개념 2: showCupertinoDialog

iOS 스타일의 다이얼로그를 실행하는 함수입니다.

showCupertinoDialog(
  context: context,// BuildContext 입력
  barrierDismissible: true, // 외부 탭해서 다이얼로그 닫을 수 있게 하기
  builder: (BuildContext context) { // 다이얼로그에 들어갈 위젯
    return Text('Dialog');
  }
);

💻 실습 및 예제

🔧 사전 준비: 폰트 등록

폰트 등록을 위해 pubspec.yaml 파일을 수정합니다:

fonts:
  - family: parisienne # family 키에 폰트 이름을 지정
    fonts:
      - asset: asset/font/Parisienne-Regular.ttf # 등록할 폰트의 위치
  - family: sunflower
    fonts:
      - asset: asset/font/Sunflower-Light.ttf
      - asset: asset/font/Sunflower-Medium.ttf
        weight: 500 # 폰트의 두께. FontWeight 클래스의 값과 같다.
      - asset: asset/font/Sunflower-Bold.ttf
        weight: 700

💡 팁: Weight는 폰트의 두께별로 파일이 따로 제공되기 때문에 같은 폰트라도 다른 두께를 표현하는 파일은 weight 값을 따로 지정해야 합니다. 이후 Flutter에서 FontWeight 클래스의 값과 매칭됩니다 (예: FontWeight.w500)

🎨 레이아웃 구상하기

MediaQuery.of(context)를 사용하면 화면 크기와 관련된 각종 기능을 사용할 수 있습니다:

• size 게터로 화면 전체의 너비와 높이를 쉽게 가져올 수 있음
• 화면 전체 높이를 2로 나눠서 화면 높이의 절반만큼 이미지가 차지하도록 설정

🤔 .of(context) 생성자란?

.of(context) 생성자는 초보자들이 많이 헷갈려하는 개념입니다.

핵심 원리:

• of(context)로 정의된 모든 생성자는 BuildContext를 매개변수로 받음
• 위젯 트리에서 가장 가까이에 있는 객체의 값을 찾아냄

동작 방식:

1. MediaQuery.of(context) → 현재 위젯 트리에서 가장 가까운 MediaQuery 값을 찾음
2. 앱 실행 시 MaterialApp이 빌드되면서 MediaQuery도 함께 생성
3. 위젯 트리 아래에서 호출하면 위로 올라가며 가장 가까운 MediaQuery 값을 가져옴

💡 비슷한 예시: Theme.of(context), Navigator.of(context) 등

🎨 테마(Theme) 시스템

Text 위젯의 기본 스타일을 변경하고 싶을 때는 테마를 사용하면 편리합니다!

테마의 장점:

• 13가지 Text 스타일을 미리 정의하여 프로젝트 전체에서 재사용 가능
• 일관된 디자인 시스템 구축

주요 구성 요소:

• ThemeData: MaterialApp의 theme 매개변수로, Flutter가 기본 제공하는 대부분 위젯의 기본 스타일 지정
• TextTheme: 글자 테마를 정할 수 있는 매개변수

주요 ThemeData 매개변수:

매개변수	설명
fontFamily	앱 전체 기본 폰트 설정
textTheme	텍스트 스타일 테마 정의
tabBarTheme	탭바 스타일 테마
cardTheme	카드 위젯 테마
appBarTheme	앱바 테마 설정
floatingActionButtonTheme	FAB 테마
elevatedButtonTheme	승격 버튼 테마
checkboxTheme	체크박스 테마

💡 패턴: 위젯 이름 + Theme 규칙을 이용해서 특정 위젯의 테마를 쉽게 설정할 수 있습니다.

🔍 심화 학습

🚨 다양한 화면 비율과 해상도에 따른 오버플로 해결하기

문제 상황:

• 핸드폰마다 화면의 비율과 해상도가 모두 다름
• 하나의 화면 기준으로 UI를 작업하면 다른 크기 핸드폰에서 레이아웃이 깨질 수 있음

구체적인 예시:

• 핸드폰 크기가 작아서 상단 글자들이 화면의 절반 이상을 차지
• 아래쪽 이미지가 남은 공간보다 더 많은 높이를 요구
• 남은 공간이 부족한데 이미지 크기를 화면의 절반으로 고정했기 때문

🚨 Flutter에서는 이를 오버플로(Overflow)라고 합니다

해결 방법:

1. 글자나 이미지의 크기를 동적으로 조절
2. 이미지가 남은 공간만큼만 차지하도록 구현 ⭐

💡 권장 방법: 이미지가 남은 공간만큼 차지하도록 Expanded 위젯을 사용하는 것이 일반적입니다.

🤔 추가 개념들

GestureTapCallback:

• Material 패키지에서 기본 제공하는 Typedef
• 버튼의 onPressed 또는 onTap 콜백 함수들이 GestureTapCallback 타입으로 정의됨

Align 위젯:

• 자식 위젯의 위치를 정할 수 있는 위젯
• 예시: Alignment.bottomCenter → 아래 중간으로 정렬

다이얼로그 옵션:

• barrierDismissible: true → 외부 탭할 경우 다이얼로그 닫기

Alignment의 정렬 값:

속성	위치
Alignment.topRight	위 오른쪽
Alignment.topCenter	위 중앙
Alignment.topLeft	위 왼쪽
Alignment.centerRight	중앙 오른쪽
Alignment.center	중앙
Alignment.centerLeft	중앙 왼쪽
Alignment.bottomRight	아래 오른쪽
Alignment.bottomCenter	아래 중앙
Alignment.bottomLeft	아래 왼쪽

💻 완성된 소스 코드

main.dart - 앱의 진입점과 테마 설정:

import 'package:flutter/material.dart';
import 'package:u_and_i/screen/home_screen.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        // 테마를 지정할 수 있는 클래스
        fontFamily: 'sunflower', // 기본 글씨체
        textTheme: TextTheme(
          // 글자 테마를 적용할 수 있는 클래스
          displayLarge: TextStyle(
            // headline1 스타일 정의
            color: Colors.white, // 글 색상
            fontSize: 80.0, // 글 크기
            fontWeight: FontWeight.w700, // 글 두께
            fontFamily: 'parisienne', // 글씨체
          ),
          displayMedium: TextStyle(
            color: Colors.white,
            fontSize: 50.0,
            fontWeight: FontWeight.w700,
          ),
          bodyLarge: TextStyle(color: Colors.white, fontSize: 30.0),
          bodyMedium: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
      ),
      home: HomeScreen(),
    ),
  );
}

home_screen.dart - 메인 화면과 상태 관리:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime firstDay = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink[100],
      body: SafeArea(
        top: true,
        bottom: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 위 아래 끝에 위젯 배치
          crossAxisAlignment: CrossAxisAlignment.stretch, // 반대축 최대 크기로 늘리기
          children: [
            _DDay(onHeartPressed: onHeartPressed, firstDay: firstDay),
            _CoupleImage(),
          ],
        ),
      ),
    );
  }

  void onHeartPressed() {
    showCupertinoDialog(
      context: context,
      builder: (BuildContext context) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            height: 300,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (DateTime date) {
                setState(() {
                  firstDay = date;
                });
              },
            ),
          ),
        );
      },
      barrierDismissible: true, // 외부 탭할 경우 다이얼로그 닫기
    );
  }
}

class _DDay extends StatelessWidget {
  final GestureTapCallback onHeartPressed;
  final DateTime firstDay;

  _DDay({required this.onHeartPressed, required this.firstDay});

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final now = DateTime.now();
    return Column(
      children: [
        const SizedBox(height: 16.0),
        Text('U&I', style: textTheme.displayLarge),
        const SizedBox(height: 16.0),
        Text('우리 처음 만난 날', style: textTheme.bodyLarge),
        Text(
          '${firstDay.year}.${firstDay.month}.${firstDay.day}',
          style: textTheme.bodyMedium,
        ),
        const SizedBox(height: 16.0),
        IconButton(
          iconSize: 60,
          onPressed: onHeartPressed,
          icon: Icon(Icons.favorite, color: Colors.red),
        ),
        const SizedBox(height: 16.0),
        Text(
          'D+${DateTime(now.year, now.month, now.day).difference(firstDay).inDays + 1}',
          style: textTheme.displayMedium,
        ),
      ],
    );
  }
}

class _CoupleImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Center(
        child: Image.asset(
          'asset/img/middle_image.png',
          // 화면의 절반만큼 높이 구현
          height: MediaQuery.of(context).size.height / 2,
        ),
      ),
    );
  }
}

📝 마무리

✅ 오늘 배운 것

• StatefulWidget과 setState: Flutter에서 상태를 관리하는 핵심 개념
• Cupertino 디자인: iOS 스타일 UI 컴포넌트 활용법
• MediaQuery: 화면 크기에 따른 반응형 UI 구현
• ThemeData: 일관된 디자인 시스템 구축 방법
• 오버플로 해결: Expanded 위젯을 통한 유연한 레이아웃