[Flutter] 이미지와 폰트 적용하기 (Image & Font)

안녕하세요 Foma 입니다!

 

오늘은 이미지와 폰트 적용하는 법에 대해서 정리해보겠습니다.

 

(비쥬얼 스튜디오 기준으로 설명드릴게요)

 

바로 시작할게요~

---

1. 이미지

 

비쥬얼 스튜디오에 images파일을 만들어주세요.

images 안에 이미지 파일을 넣어주세요.

 

 

pubspec.yaml 파일로 이동하셔서

 

아래와 같이 파일 경로와 이미지 이름을 넣어주세요.

  assets:
    - images/profile.png

AssetImage에 이미지 경로와 이름을 넣어주세요.

  CircleAvatar(
            radius: 50.0,
            backgroundImage: AssetImage('images/profile.png'),
          ),

 

이렇게 하면 아래와 같이 이미지가 적용됩니다.

 

---

2. 폰트

 

먼저 아래 구글 폰트 사이트로 가서 원하는 폰트를 다운받아주세요!

 

 

Google Fonts

그러면 다음과 같이 ttf파일이 있을거에요.

 

 

비쥬얼 스튜디오로 이동해서 폴더를 fonts로 만들어줍니다.

 

그리곤 이 fonts 폴더 안에 ttf파일을 넣어주세요.

pubspec.yaml 파일로 이동해주세요.

 

아래와 같이 assets 밑에 다운받은 ttf이름과 주소를 넣어주세요.

 

  assets:
    - images/profile.png
    
  fonts:
    - family: Timmana
      fonts:
        - asset: fonts/Timmana-Regular.ttf
      # ...

 

위에서 정해준 family 이름을 적용해주세요.

Text(
            "Fomagran",
            style: TextStyle(
                fontFamily: "Timmana",
                fontSize: 40,
                color: Colors.white,
                fontWeight: FontWeight.bold),
          ),

 

아래와 같이 폰트가 적용되는걸 볼 수 있습니다!