[Flutter] theme 적용해보기 - 글꼴

✍ theme 글꼴 적용

보통 Text(...) 위젯의 스타일(style)을 적용하려면 다음과 같이 Text() 위젯마다 TextStyle() 를 일일이 적용해야 한다.

Text(
  "하늘하늘 맑은 하늘",
  style: TextStyle(
    color: Colors.white,
    fontSize: 70.0,
    fontFamily: 'parisienne'
  ),
);

중복되는 TextStyle() 를 하나로 통합해서 사용할 수 있는 방법이 theme 에 textTheme 이다.

 

main 함수가 있는 MaterialApp 의 theme 인자값에 TextStyle() 을 설정한다.

MaterialApp(
  theme: ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(
      color: Colors.white,
      fontSize: 28.0,
      fontFamily: 'sunflower',
      fontWeight: FontWeight.w800,
    ),
    headline2: TextStyle(
      color: Colors.white,
      fontSize: 40.0,
      fontFamily: 'sunflower',
      fontWeight: FontWeight.w500),
    ),
  ),
  home: HomeScreen()
);

 

자식 위젯 HomeScreen() 에서 TextStyle() 을 적용하는 예

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      backgroundColor: Colors.pink[100],
      body: Center(
        child: Text(
          "하늘하늘 맑은 하늘"
          style: textTheme.headline1
        )
      )
    );
  }
}

textTheme 변수의 Theme.of(context) 는 관련 상위 위젯의 theme 를 가져온다. 따라서 HomeScreen 위젯이 쓰일 main 의 MaterialApp() 위젯의 theme 정보를 가져온다. 따라서 Theme.of(context).textTheme 의 설정했던 headline1, headline2 를 가져와 사용할 수 있다. 

 

headline1 과 같이 사용할 수 있는 이름은 다음과 같다.

TextTheme({
    TextStyle? displayLarge,
    TextStyle? displayMedium,
    TextStyle? displaySmall,
    this.headlineLarge,
    TextStyle? headlineMedium,
    TextStyle? headlineSmall,
    TextStyle? titleLarge,
    TextStyle? titleMedium,
    TextStyle? titleSmall,
    TextStyle? bodyLarge,
    TextStyle? bodyMedium,
    TextStyle? bodySmall,
    TextStyle? labelLarge,
    this.labelMedium,
    TextStyle? labelSmall,
    TextStyle? headline1,
    TextStyle? headline2,
    TextStyle? headline3,
    TextStyle? headline4,
    TextStyle? headline5,
    TextStyle? headline6,
    TextStyle? subtitle1,
    TextStyle? subtitle2,
    TextStyle? bodyText1,
    TextStyle? bodyText2,
    TextStyle? caption,
    TextStyle? button,
    TextStyle? overline,
})