[Flutter] Assets/TextStyle/DatePicker/Theme 살펴보기

Assets

fonts:
    - family: '폰트명1'
      fonts:
        - asset: asset/font/{폰트명}.ttf

    - family: '폰트명2'
      fonts:
        - asset: asset/font/{폰트명}.ttf
          weight: 300
        - asset: asset/font/{폰트명}.ttf
          weight: 500
        - asset: asset/font/{폰트명}.ttf
          weight: 700

• 폰트 family로 사용할 이름을 설정한다.
• 하나의 폰트 파일만 사용하면 상관없지만, 여러개 사용할 시에 weight을 설정할 수 있다.
• 기본 default는 400으로 설정되어 있다.

 

TextStyle

Text(
       'Hello World',
       style: TextStyle(
         color: Colors.white,
         fontFamily: '폰트명',
         fontSize: 100.0,
       ),
),

• TextStyle에서 색상과 fontFamliy, fontSize를 지정할 수 있다.
• font의 두께는 FontWeight으로 설정할 수 있다.
• 디자인 형태는 상태가 바뀌지 않는 StatelessWidget이며, 해당 파일에서만 사용할 컴포넌트라면 _{컴포넌트이름} 클래를 private 컴포넌트로 분리하여 사용할 수 있다.

 

DatePicker

import 'package:flutter/cupertino.dart';

• cupertino.dart — iOS와 비슷한 스타일
  • Cupertino는 Apple 본사 이름

onPressed: () {
   showCupertinoDialog(
        context: context,
        builder: (BuildContext context) {
           return Container(
             color: Colors.white,
             height: 100.0,
                 );
              },
           );
        },

• 높이만큼이 아닌 전체 사이즈가 하얀색이 되는데, 플러터의 특징 중 하나는 다음과 같다.

💡 높이를 지정해도 특정 위젯이 어디에 정렬해야하는 지 알 수 없을 때 최대한의 사이즈로 설정된다.

• 이러한 상황에는 Align을 통해서 정렬 위치를 지정해줄 수 있다.

return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
      color: Colors.white,
      height: 100.0,
      child: CupertinoDatePicker(
      	mode: CupertinoDatePickerMode.date,
      	onDateTimeChanged: (DateTime date) {},
		),
	),
);

• onDateTimeChange는 on으로 시작하기 때문에 함수라는 것을 추측할 수 있다.
• 해당 함수에 들어갈 타입은 cmd+b(mac 기준)로 들어가서 확인해볼 수 있다.
• 또한, ValueChanged를 확인해보면서 어떠한 함수가 들어가는 지 확인할 수 있다. (제너릭 타입의 값(DateTiem)을 리턴)

final ValueChanged<DateTime> onDateTimeChanged;
typedef ValueChanged<T> = void Function(T value);

 

Theme

// main.dart

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        fontFamily: '폰트명',
        textTheme: TextTheme(
          headlineMedium: TextStyle(
            color: Colors.white,
            fontFamily: '폰트명',
            fontSize: 100.0,
          ),
          bodyMedium: TextStyle(
            color: Colors.white,
            fontSize: 70.0,
            fontWeight: FontWeight.w700,
          ),
          bodySmall: TextStyle(
            color: Colors.white,
            fontSize: 50.0,
          ),
        ),
      ),
      home: Home(),
    ),
  );
}

// home.dart

@override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).textTheme;
    final now = DateTime.now();

    return Expanded(
      child: Column(
        children: [
          Text(
            'Hello World',
            style: theme.headlineMedium,
          ),
          Column(
            children: [
              Text(
                'Hi World',
                style: theme.bodySmall,
              ),

• 다음과 같이 MaterialApp 하위에 위젯으로 theme와 ThemeData를 사용할 수 있다.
• 해당 컴포넌트의 default fontFamily도 설정할 수 있으며, textTheme를 통해 텍스트 style을 공통 컴포넌트로 사용할 수 있다.
  • 이전 Theme 속성에는 headline1과 같은 값으로 존재했다.
  • 현재에는 headlineMedium처럼 네이밍이 변경된 상태이다.
• 설정이 완료되었다면, build 되는 위젯 내부에 Theme.of(context).textTheme를 변수로 설정해준다.
  • Theme.of(context) 내부에는 여러 값들이 존재한다.
  • of라는 constructor를 사용하는 클래스는 위젯에서 가장 가까이 있는 값을 가져온다는 특징이 있다.
• style에서 theme 변수에 사용되고 있는 headlineMedium과 같은 값들을 가져와서 사용하면 된다.