Flutter - Asset 사용(Font, Image)

Flutter에서 폰트나 이미지 등을 사용하는 방법을 확인 해 보겠습니다.

일단 적당한 폰트를 받아서 assets/fonts 폴더에 넣어줍니다.

전 무료폰트인 구글의 NotoSerif를 받아서 넣었습니다.

기본폰트가 고딕계열이라 Serif계열을 쓰면 폰트가 바뀐것을 쉽게 알 수 있습니다.

 

이제 새로운 Flutter 프로젝트를 생성합니다.

여기서 화면 중앙에 문구표시되는 부분이 있는데 약간만 수정합니다.

children: <Widget>[

Container(
  width: 300,
  child: const Text(
    'You have pushed the button this many times:',
    style: TextStyle(
      fontSize: 30,
    ),
  ),
),

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headline4,
),
],

원래는 const Text만 있었는데 Container로 감싸고 width 300을 주었습니다.

Text에는 style을 주었고 fontSIze를 30으로 주었습니다.

변경된 모습이고 폰트가 커져서 이제 폰트변화를 잘 볼 수 있습니다.

이제 폰트를 등록해야 하는데 pubspec.yaml파일을 수정해야 합니다.

pubspec.yaml

pubspec.yaml파일을 보시면 하단부에 fonts라는 주석부분이 있습니다.

이부분을 주석을 풀고 수정합니다.

여기서 주의해야 할것이 pubspec.yaml은 들여쓰기에 매우 민감해서 들여쓰기를 더하거나 덜해도 에셋을 읽지 못하는 경우가 발생합니다.

항상 2칸기준으로 fonts: 부분도 앞에 2칸의 공백 - family: 부분도 fonts: 기준으로 2칸의 공백이 필요합니다.

  fonts:
    - family: noto_serif
      fonts:
        - asset: assets/fonts/NotoSerif-Bold.ttf
          weight : 700
        - asset: assets/fonts/NotoSerif-BoldItalic.ttf
          weight : 700
          style : italic
        - asset: assets/fonts/NotoSerif-Italic.ttf
          weight : 400
          style : italic
        - asset: assets/fonts/NotoSerif-Regular.ttf
          weight : 400

수정된 모습입니다.

family가 사용할 폰트의 종류가 되고 하위 폰트들은 경우에 따라서 쓰이게될 폰트들의 목록입니다.

 

child: const Text(
  'You have pushed the button this many times:',
  style: TextStyle(
    fontSize: 30,
    fontFamily: 'noto_serif',
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

사용법은 위와 같습니다.

family는 단순히 폰트를 맵핑하는 이름이기 때문에 어떤것을 해도 상관없고 본인이 정한 이름을 할당해 주면 해당 폰트가 연결 됩니다.

weight도 개별 설정 해 줄수 있고 italic일경우도 다른폰트를 쓸 수 있습니다.

만일 다른폰트가 없다면 bold나 italic은 가상화 폰트로 알아서 처리하게 되는데 이때 폰트 퀄리티가 떨어지는 경우가 있으므로 다양하게 폰트를 넣어주면 깔끔하게 처리될 수 있습니다.

  fonts:
    - family: noto_serif
      fonts:
        - asset: assets/fonts/NotoSerif-Bold.ttf
          weight : 700
        - asset: assets/fonts/NotoSans-BlackItalic.ttf
          weight : 700
          style : italic
        - asset: assets/fonts/NotoSerif-Italic.ttf
          weight : 400
          style : italic
        - asset: assets/fonts/NotoSerif-Regular.ttf
          weight : 400

만일 위와같이 700 italic을 다른폰트로 맵핑해 주게 된다면(NotoSerif -> NotoSans) 해당 폰트를 그대로 쓰게 됩니다.

이와 같이 경우에 따라서 폰트를 다양하게 처리할 수 있습니다.

 

이제 이미지 입니다.

이미지도 일단 받아서 assets/images 폴더에 넣어줍니다.

이미지도 폰트와 마찬가지로 pubspec.yaml에 정의 해 주어야 합니다.

pubspec.yaml을 보게되면 중단부에 이미지 관련 부분이 있습니다.

  assets:
    - assets/image/flutter_image.png

이미지를 추가해 줍니다.

Image.asset('assets/image/flutter_image.png'),

 

이미지가 너무 크다 생각되면 Container로 감싼 다음에 크기를 줄여 줄 수도 있습니다.

Container(
    width: 100,
    child: Image.asset('assets/image/flutter_image.png'),
),

 

마지막으로 AndroidStudio 에서 정확한 path를 복사하고 싶을떄 에셋의 우클릭

Copy Path/Reference

 

원하는 경로 선택

우클릭 메뉴에 몇가지 보기가 있습니다.

1. 절대경로

2. 파일 이름

3. Content Root부터 경로

여기서 보통 3번을 쓰게 됩니다.