Flutter Chapter-02-07 내 정보 만들기 글꼴 변경하기

외부 앱을 개발하다 보면 디자이너가 글꼴을 지정해주는 경우가 많다.

오늘은 외부 글꼴형식으로 변경하는 부분을 설명하도록 하겠다.

 

1. 글꼴 다운로드 

- https://fonts.google.com/

- 해당하는 경로에서 원하는 폰트를 다운로드 한다.

Google Fonts

구글 폰트 사이트

구글 폰트 Black Han Sans 다운로드

2. 디렉터리 만들기

 - flutter_ch_01의 프로젝트 밑에 fonts 디렉터리를 만든 후 해당하는 경로에. tff파일을 넣어준다.

폰트 디렉토리 구조

 

3. pubspec.yaml 파일 접근 (없으면 아래 url을 참조)

 - 주석의 URL로 접근해보면 fonts를 사용하는 방법이 나와있는데, 해당하는 부분은 직접 설명하도록 하겠다.

  # 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: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

https://flutter.dev/custom-fonts/#from-packages

 - yaml 파일은 띄어쓰기를 인식하기 때문에 해당하는 경로로 들어가 복붙으로 작성하길 바란다.

Use a custom font

- 저번 시간에 말했듯이 yaml 파일은 내부의 리소스 파일을 읽을 수 있게 환경설정을 잡아준다. 때문에 fonts도 인식할 수 있게 환경설정 파일을 수정해 준다.

4. 사용방법

 - .yaml 파일에서 환경설정을 잡으면 내부의 디렉터리 fonts를 찾아서 인식해준다.

 - 위젯을 사용할 때 textStyle을 지정해서 fonts 디렉터리의. tff을 사용한다.

 

요약

 - 폰트를 다운로드한다.

 - 프로젝트 및에 fonts 티 렉토리를 생성한다.

 - 생성한 fonts 디렉터리 밑에 다운로드한. tff파일을 넣는다.

 - yaml 파일에서 아래와 같이 fonts를 잡아준다.

##플루터의 셋팅을 설정해준다.
flutter:
  ## 머트리얼 디자은을 사용할 것이다.
  uses-material-design: true
    ## 사용하려는 자산
    ## 공백 3칸 이것을 어길시 에러가 떨어진다.
  assets:
    - images/coverImage.jpg
  fonts:
    - family: BlackHanSans-Regular
      fonts:
        - asset: fonts/BlackHanSans-Regular.ttf

- dart에서 위젯을 사용할 때 아래와 같이 사용한다.

Column(
    children: const [
      Text('010-XXXX-XXXX', style: TextStyle(
          fontFamily: 'BlackHanSans-Regular',
          fontSize: 15)
      ),
    ],
  ),