Theme 설정 및 Dialog

 

 

 

본문

 

 1) 이미지 크기 

 - 휴대폰 크기는 정해져 있다. 

 - 해당 크기를 넘어서면 다음과 같은 에러가 난다. 

overflow error 
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 29 pixels on the bottom.

 

 - 이는 크기가 지정된 위젯이 화면 밖으로 빠져나가서 생기기 때문에 위젯의 크기를 지정하기 보단 동적으로 유지하기 위해 Expanded 위젯으로 감싸주자 

@override
  Widget build(BuildContext context) {
    return Expanded(
      child: Center(
        child: Image.asset(
          'asset/img/couple.png',
         // Expanded로 감쌌으니까 주석처리
          // height: MediaQuery.of(context).size.height / 2,
        ),
      ),
    );
  }

 

 

 2) Thmem 설정 

 - 보통 스타일 관련은 [위젯이름Theme] 규칙

 - font파일인 ttf를 다운로드 한 후 pubspec.yaml파일에 설정하기 

  fonts:
    - family: parisienne
      fonts:
        - asset: asset/font/Parisienne-Regular.ttf

    - family: sunflower
      fonts:
        - asset: asset/font/Sunflower-Light.ttf
        - asset: asset/font/Sunflower-Medium.ttf
          weight: 500
        - asset: asset/font/Sunflower-Bold.ttf
          weight: 700

 

 - Theme을 MaterialApp의 theme 매개변수에 설정 : 위젯에 글꼴을 아래 설정한 걸로 적용 가능 

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      fontFamily: 'sunflower',
      textTheme: const TextTheme(
        headline1: TextStyle(
          color: Colors.white,
          fontSize: 80.0,
          fontWeight: FontWeight.w700,
          fontFamily: 'parisienne',
        ),
      ),
    ),
    home: HomeScreen(),
  ));
}

 

 - 위젯은 style 매개변수에 설정 

	Text(
          'U&I',
          style: textTheme.headline1,
        ),

 

 

 

 3) CupertinoDialog

 - ios의 다이얼로그 스타일 

 - 해당 다이얼로그 같은 경우 보통 메서드 내에 정의해서 이벤트가 있었을 때 랜더링 하도록 한다 : 랜더링 위치가 HomeScreen

 - 다이얼로그 위치를 지정해주기 위해 Align이라는 위젯을 사용하여 화면에 하위 위젯을 정렬한다. 

 

void onHeartPressed() {
    DateTime now = DateTime.now();
    DateTime endOfDay = DateTime(now.year, now.month, now.day, 23, 59, 59);

    showCupertinoDialog(
      context: context,
      builder: (BuildContext context) {
        // 정렬 전용 위젯 Align
        return Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            height: 300.0,
            child: CupertinoDatePicker(
                // 미래 시간 설정 못 하도록
                maximumDate: endOfDay,
                mode: CupertinoDatePickerMode.date,
                // 다이얼로그에서 선택한 날짜를 date 매개변수로 받음
                onDateTimeChanged: (DateTime date) {
                  setState(() {
                    firstDay = date;
                  });
                }),
          ),
        );
      },
      // 외부 탭 할 때 다이얼로그 닫기
      barrierDismissible: true,
    );
  }
}

 

 

 

참고

《Must Have 코드팩토리의 플러터 프로그래밍 2판》의 스터디 내용 입니다.