Flutter에서 폰트 설정하는 방법에 대해 간략하게 살펴봅시다.
순서는 다음과 같다.
1) 폰트파일을 준비해 안드로이드 스튜디오에 추가합니다.
2) 'pubspec.yaml' 에 해당 폰트의 위치와 정보를 연결합니다.
3) MaterialApp( theme: ThemeData( textTheme: TextTheme( TextStyle 등록 ) ) )
4) Theme.of(context).textTheme 로 MaterialApp의 textTheme 데이터를 불러와 원하는 Text Widget에 설정합니다.
1) 폰트파일을 준비해 안드로이드 스튜디오에 추가합니다.
2) 'pubspec.yaml' 에 해당 폰트의 위치와 정보를 연결합니다.
Weight는 폰트 두께를 의미합니다. 폰트의 두께별로 파일이 따로 제공되기 대문에 같은 폰트라도 다른 두께를 표현하는 파일은 weight 값을 따로 표현해줘야 합니다. 두께값은 100 ~ 900 까지 있으며 두꺼울수록 숫자가 큽니다. ( weight: 500 은 FontWeight.w500 와 같습니다. )
# The following section is specific to Flutter packages.
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- asset/img/
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
3) MaterialApp( theme: ThemeData( textTheme: TextTheme( TextStyle 등록 ) ) )
4) MaterialApp의 textTheme 데이터를 불러와 원하는 Text Widget에 설정합니다.
Theme.of(context).textTheme 는 위젯 트리에서 가장 가까운 객체의 값을 찾아냅니다. 따라서 Theme.of(context).textTheme 는 MaterialApp 의 textTheme 데이터를 의미합니다. 조금 더 자세한 정보를 알고 싶다면 아래의 링크를 살펴주세요.
링크: (준비중)
실제 코드에서는 headline 1, 2, 3, ... 과 bodyText 1, 2, ... 는 이제 권장하지 않는다. headlineLarge, headlineMedium, headlineSmall, bodyLarge, bodyMedium, bodySmall의 사용을 권장합니다. 다음엔 권장하는 스타일로 구현 해보겠습니다.
'Flutter > Environment & Convention' 카테고리의 다른 글
| [Flutter] APK 뽑아내기 (0) | 2023.06.08 |
|---|---|
| [Flutter] 로드맵 (0) | 2023.04.08 |
| [Flutter] 플러그인에 따른 권한 설정(AOS, iOS) (0) | 2023.03.28 |
| [Flutter] Flutter에 대한 이해 (0) | 2023.03.24 |