이전 블로그의 build 환경 세팅을 완료 했으면 이어서 폰트와 테마를 세팅을 하겠다
폰트는 야놀자에서 제공하는 야놀자체를 사용하였다
무료 폰트 중 가장 깔끔한 폰트라 생각해서 자주 사용하며, 이 외에도 google font, naver font 에서 제공하는 많은 무료 폰트들을 사용할 수 있다
먼저 project 수준에서 assets 폴더를 추가하고 그 안에 fonts 폴더를 만든다음 다운로드 받은 .ttf 팡리 2개를 넣어준다
Yanolja-Bold.ttf
Yanolja-Regular.ttf
pubspec.yaml 파일 아래쪽에 보면 fonts: 라고 주석 처리 되있는 부분에 아래와 같이 넣어 주면 되는데, 줄 간격을 잘 맞쳐주어야 한다
tip: 위에 주석 처리된 #example 라인에 맞추면 된다
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
fonts:
- family: Yanolja
fonts:
- asset: assets/fonts/Yanolja-Regular.ttf
- asset: assets/fonts/Yanolja-Bold.ttf
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
App의 시작부분에 해당하는 app_widget.dart 파일에 MaterialApp으로 시작하는 부분에 theme 속성에 fontFamily 값을 pubspec.yaml 파일에서 설정한 family 값을 똑같이 입력하고 실행하면 적용이 된다
App 전체에서 사용할 테마를 설정하고 싶으면 theme 속성을 활용하면 app 전체 테마를 만들 수 있다
많은 기능을 제공하고 design이 정해진 경우 미리 테마를 설정하고 개발을 진행하면 된다
class AppWidget extends StatelessWidget {
const AppWidget({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
theme: ThemeData(
fontFamily: 'Yanolja',
primaryColor: Colors.deepPurple,
),
);
}
}