Font(폰트) 변경
Font 지정하는 방법 2가지에 대해 알아보자.
- google_fonts 패키지를 활용해서 폰트를 지정하는 방법
- 직접 Font를 다운로드 받아 지정하는 방법
google_fonts 패키지 사용
- 구글에 등록된 폰트를 쉽게 사용할 수 있는 패키지
- HTTP 통신을 통해 폰트를 자동으로 가져온다.
- GoogleFonts 내 Font 별 Theme 함수가 제공된다. (모든 폰트를 제공하진 않는다.)
앱 전체 Font 적용하기
- MaterialAPP 내 theme 속성을 지정한다.
- ThemeData 내 textTheme 속성에서 GoogleFonts의 원하는 폰트의 theme를 선택한다.
일부 텍스트만 Font 적용하기
1. 고정 Font (폰트가 변경되지 않는 경우)
2. 가변 Font (상황에 따라 폰트가 변경될 경우)
- getFont 함수를 사용해서 원하는 폰트 명을 작성한다.
- 폰트 명 작성 시 맨 첫 글자는 대문자이다.
Font와 TextStyle을 함께 사용하기
1. TextStyle 클래스를 사용하는 방법
2. TextTheme 클래스 사용하는 방법
3. fontSize, fontWeight, fontStyle을 함께 사용하는 방법
https://pub.dev/packages/google_fonts
google_fonts | Flutter Package
A Flutter package to use fonts from fonts.google.com. Supports HTTP fetching, caching, and asset bundling.
pub.dev
외부 Font 사용하기
- 원하는 폰트를 찾아 다운로드 받는다.
- zip 파일을 받은 후 압축을 푼다.
- 압춘을 푼 파일의 확장자 명이 ttf 혹은 otf 인 경우 사용 가능하다.
※ Google Fonts 뿐만 아니라 여러 다른 사이트에서 다양한 폰트를 제공한다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- 폰트 파일을 lib/fonts 경로로 이동시킨다.
- pubspec.yaml 파일에 fonts를 등록시킨다.
Font Size 별 명칭
| 이름 | weight |
| Thin | 100 |
| Extra Light | 200 |
| Light | 300 |
| Normal, Regular | 400 |
| Medium | 500 |
| Semi Bold | 600 |
| Bold | 700 |
| Extra Bold | 800 |
| Black | 900 |
앱 전체 Font 적용하기
일부 텍스트만 Font 적용하기
'Flutter' 카테고리의 다른 글
| Equatable 플러그인을 사용하여 객체 비교하기 (0) | 2023.05.11 |
|---|---|
| Google Map style 변경하기(기본 마커, 라벨, 길 없애기) (0) | 2023.05.02 |
| Flutter - ToggleButtons (0) | 2023.04.28 |
| 이미지를 배경화면으로 사용 (0) | 2023.04.28 |
| Material3 Design 적용하기 (0) | 2023.04.26 |
