[Flutter] Theme - ThemeData

main build 

• 전체 폰트 적용 - fontFamily: 'Dohyeon'
• headline3 만 적용 - TextStyle(fontFamily: 'Dohyeon')
• 모든 button 의 텍스트 색상 적용 - button: TextStyle(color: Colors.white)

 

class AppleApp extends StatelessWidget {
  const AppleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      theme: ThemeData(
        primarySwatch: Colors.red,
        // fontFamily: 'Dohyeon',
        textTheme: const TextTheme(
          headline3: TextStyle(fontFamily: 'Dohyeon'),
          button: TextStyle(color: Colors.white),
        )
      ),
      routeInformationParser: BeamerParser(),
      routerDelegate: _routerDelegate,
    );
  }
}

 

해당 화면 build

 

  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text('Apple Market',
              style: Theme.of(context)
                .textTheme
                .headline3!
                .copyWith(color: Theme.of(context).colorScheme.primary),
            ),
            ExtendedImage.asset('assets/imgs/carrot_intro.png'),
            const Text('우리 동네 중고 직거래 사과마켓',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            const Text(
              '사과 마켓은 동네 직거래 마켓이에요\n'
              '내 동네를 설정하고 시작해보세요',
              style: TextStyle(fontSize: 16,),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: TextButton(
                    onPressed: onButtonClick,
                    child: Text('내 동네 설정하고 시작하기',
                      style: Theme.of(context).textTheme.button,
                    ),
                    style: TextButton.styleFrom(backgroundColor: Theme.of(context).primaryColor),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

 

 

최종 화면 

 

 

 

•   Apple Market - 기본설정은 headline3 참고, 단 색상은 Theme의 primary 색상을 참조함

 

• button의 텍스트 색상은 Theme 에서 설정한 button의 TextStyle 적용
• button의 자체 색상은 Theme 에서 설정한 primary 색상을 적용함