[Flutter] 230112 - 디데이 앱

수강 강의: https://url.kr/inflearn
진도: 37강 / 127강

0. 프로젝트 미리보기

1) 날짜 디데이를 계속 변경해주어야 하기 때문에 homescreen()을 statefullWidget으로 불러온다.
2) 선택 전에는 오늘 날짜가 뜨고, 하트를 눌러서 날짜를 선택함
3) 화면에 선택한 날짜가 반영되고 해당 날짜에 맞는 디데이가 뜬다.

=> 포인트는 statefullWidget이다.

1. 화면 구성 단계

1-1. TextStyle 설정하기

asset/font 폴더를 생성해서 안에 ttf파일을 넣어주고, pubspec.yaml 파일을 수정해줬다,

  fonts:
      - family: sunflower // 폰트 패밀리 이름
        fonts:
          - asset: Sunflower-Light.ttf // 폰트 이름.확장자
          - asset: Sunflower-Medium.ttf
            weight: 500 // weight 설정하여 폰트 굵기 설정
          - asset: Sunflower-Bold.ttf
            weight: 700

이제 이정도는 안보고 할 수 있어야 하는데 가끔 yaml파일 수정하는게 헷갈린다..

1-2. Colors 색상 명도

Colors.pink 와 같이 사용하려는 특정 색상이 너무 진하거나 연한 경우에, Colors.pink[400]와 같이 괄호 안에 숫자를 넣어줘서 색을 조정해준다. 기본값은 500이고, 숫자를 낮출 수록 연해지고 높일 수록 진해진다

2. 날짜 선택하기

2-1. 하트 클릭 -> 날짜 선택 기능

하트를 클릭하면 날짜를 선택하는 Container가 나오도록 onPressed: () {} 를 이용했다.

2-2. 날짜 선택해서 받아오기

StatefulWidget 안에서

DateTime selectedDate = DateTime.now();

로 기본값을 현재 날짜로 받아온다.

그리고 CupertinoDatePicker를 이용해서 간단하게 날짜를 선택하고 함수로 받아올 수 있었다.
선택한 날짜는 date가 되고, selectedDate에 date를 넣어줬다.

child: CupertinoDatePicker(
                        mode: CupertinoDatePickerMode.date,
                        onDateTimeChanged: (DateTime date) {
                          setState(() {
                            selectedDate = date;});;})

와.. 여기서 진짜 플러터의 엄청남을 느꼈음
처음에 날짜 선택하고 받아오는 기능 만들어야 된다는거 알고 막막했는데 이렇게 간단하게 할 수 있다니....

3. 화면에 반영하기

3-1. 선택된 날짜 반영하기

Text('${selectedDate.year}.${selectedDate.month}.${selectedDate.day}')

로 선택된 날짜를 반영할 수 있었다.

3-2. D-day 숫자 반영하기

${DateTime(
              now.year, // DateTime 안에서 year, month, day 값을 받아온 뒤
              now.month,
              now.day,
            ).difference(selectedDate).inDays // selectedDate와 비교해서 inDays로 표현을 한다.
            + 1 // D-day는 당일이 1일이므로 +1을 해줌
            } 

여기서 now 함수는 DateTime.now()이다.

3-3. 버그 고치기

날짜를 선택할 때 미래의 날짜를 선택하면 D-day 수가 - (ex: -50일) 로 뜨는 버그가 있다.
이를 고치기 위해서 CupertinoDatePicker의 한계, 즉 최대 날짜를 정해준다.

initialDateTime: selectedDate,
maximumDate: DateTime(now.year, now.month, now.day)

maximumDate만 해서 불러오면 에러가 남.
CupertinoDatePicker에는 처음 불러오는 날짜가 있는데, 이가 겹치기 때문.
따라서 initialDateTime을 selectedDate로 설정해서 에러를 고침.

4. 코드관리

현재와 같은 구조에서 보면, TopPart와 BottomPart로 따로 구성하여 대부분의 코드가 아래쪽에서 선언되어 아래쪽에서 사용되고 있다.
데이터는 항상 부모클래스에서 자식클래스로 흐르기 때문에 이러한 구조는 좋지 않다.
따라서 statefulWidget으로 선언된 각 TopPart, BottomePart 부분을 HomeScreen으로 옮겨와주는 과정을 실행한다.

Container(
          width: double.infinity,
          child: Column(
            children: [
              _TopPart(
                selectedDate: selectedDate,
                onPressed: onHeartPressed(),
              ),
              _BottomPart(),
            ],
          ),
        ),

기존의 statefulWidget에서 사용하던 onPressed는 onHeartPressed()라는 함수를 따로 만들어서 넣어줬음.

코드관리가 제일 어려운 것 같음 T^T

5. 테마 적용

5-1. TextTheme

Flutter에서는 theme을 이용해서 폰트 스타일을 미리 만들어놓고 간편하게

style: theme.textTheme.headline(테마이름)

로 적용할 수 있다

6. 새롭게 알게된 위젯

6-1. Expanded()

이미지를 넣으려고 할 때, 이미지가 삐져나오는 경우에는 Expanded()를 이용한다. 현재 사용 할 수 있는 범위 내 최대한을 이용해서 이미지를 넣을 수 있음.

7. 마무리

디데이 앱... 사실 3번 할 때 까지는 오 재미있는데? 했지만
코드관리부터는 힘이 빠지기 시작했다
상태관리 어케하지 벌써부터 걱정됨