[Flutter] asset 추가하기 / font 사용하기

✍ asset 추가하기

 

1. android stduio 프로젝트의 최상단에 오른쪽 마우스 클릭 > new > Directory로 이미지 파일이 들어갈 폴더를 생성해 준다. (asset/img)

 

 

2. 생성한 폴더에 준비한 이미지를 넣는다.

(이미지 경로 - asset/img/free_hart_img.png)

 

 

3. pubspec.yaml 파일에 flutter: 아래 주석 부분에서 설명한 것처럼 이미지가 있는 경로를 입력한다. 파일을 직접 입력해도 되지만 다음과 같이 폴더를 지정해도 된다. (asset/img)

 

 

4. [Pub get] 버튼을 눌러준다.

 

+ 이미지 위젯 추가하기 예시 (Image.asset(이미지 경로))

void main(){
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(Image.asset("asset/img/free_hart_img.png"))
      )
    )   
  );
}

 

 

✍ font 추가 / 사용

 

< 무료 폰트 사이트 >

Google Fonts

 

 

1. 프로젝트에 적용할 font를 다운로드하고 프로젝트의 적당한 곳에 추가한다( font 파일 확장자 : .ttf )

> asset/font/...

 

2. pubspec.yaml 파일에 추가한 font를 적용시킨다. 적용 방법은 다음과 같다.

fonts 키워드 아래에 적용할 폰트 리스트를 적으면 되는데 family는 프로젝트에서 적용할 폰트 이름이고 familt 아래 fonts: 를 적고 asset: 에 적용할 폰트들을 적으면 된다. weight: 는 굵기 정도를 결정하는 값인데 asset 아래에 weidht 가 없으면 400이 기본값으로 들어간다.

 

예를 들어, 1번에서 적용한 폰트를 적용하면 다음과 같이 쓸 수 있다.

> pubspec.yaml

flutter:

  fonts:
    - family: parisienne
      fonts:
        - asset: asset/font/Parisienne-Regular.ttf
    - family: sunflower
      fonts:
        - asset: asset/font/Sunflower-Light.ttf
        - asset: asset/font/Sunflower-Medium.ttf
          weight: 500
        - asset: asset/font/Sunflower-Bold.ttf
          weight: 800

 

pubspec.yaml 에 추가한 뒤,  [Pub get]  버튼을 누르면 프로젝트에 적용된다. 실제 TextStyle()에서 사용할 때는 fontFamily , fontWeight 등을 사용하면 된다.