[Flutter] Font Setting

Tyger·2021년 10월 20일
0

Project Font Setting

이전 블로그의 build 환경 세팅을 완료 했으면 이어서 폰트와 테마를 세팅을 하겠다

폰트는 야놀자에서 제공하는 야놀자체를 사용하였다
무료 폰트 중 가장 깔끔한 폰트라 생각해서 자주 사용하며, 이 외에도 google font, naver font 에서 제공하는 많은 무료 폰트들을 사용할 수 있다

먼저 project 수준에서 assets 폴더를 추가하고 그 안에 fonts 폴더를 만든다음 다운로드 받은 .ttf 팡리 2개를 넣어준다

assets/fonts

Yanolja-Bold.ttf
Yanolja-Regular.ttf

pubspec.yaml 파일 아래쪽에 보면 fonts: 라고 주석 처리 되있는 부분에 아래와 같이 넣어 주면 되는데, 줄 간격을 잘 맞쳐주어야 한다
tip: 위에 주석 처리된 #example 라인에 맞추면 된다

pubspec.yaml

  # 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이 정해진 경우 미리 테마를 설정하고 개발을 진행하면 된다

app_widget.dart

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,
      ),
    );
  }
}

Example

profile
Flutter Developer

0개의 댓글