[Flutter] 플러터 #06 - 이미지와 폰트

Image라는 앱에 Image Widget이란 타이틀의 앱바를 가진 위젯에 이미지와 폰트를 첨부하는 과정을 설명할 것이다.

설명은 사진과 함께 기록해두었다. 

 

이미지 추가

1. 먼저 안드로이드 스튜디오에서 이미지를 삽입할 프로젝트에서 새로운 다트 파일을 추가한다.

    나는 image라는 프로젝트에서 imageWidget이라는 파일을 준비했다.

 

2. main이 아닌 imageWidget.dart 파일을 열고 material.dart를 import 한다.

    그리고 StatefulWidget을 상속받는 클래스를 생성한다.

    해당 클래스는 State를 상속받는 _ImageWidgetState 클래스를 반환해야 한다.

 

3. 이미지를 추가하려면 프로젝트에 해당 이미지가 포함되어야 한다.

    프로젝트 탐색 창에서 새로운 Directory 생성한다. 나는 image라는 Directory를 생성했다.

 

4. 생성한 Directory에 원하는 사진을 마우스로 끌어다 넣는다. 

    이렇게 하면 프로젝트에 이미지를 추가한 것이 된다.

 

5. 플러터 앱에서는 이미지를 사용하기 위해 pubspec.yaml 파일에 해당 이미지 정보를 추가해야 한다. 

    pubspec.yaml은 플러터 앱의 환경 설정과 관련된 파일인데 여기서 플러터 버전 관리나 새로운 패키지를 추가하기도 하고 이미지와 폰트도 추가할 수 있다. 한 가지 주의할 점은 코드를 추가할 때 들여 쓰기나 띄어쓰기를 조심해야 한다. 잘못 작성할 시 앱이 제대로 동작하지 않는다. 

    아래 사진과 같이 이미지를 추가하는 코드를 작성한다.

 

6. pubspec.yaml 파일을 수정하면 편집창에 노란 창이 뜨는데 플러터 프레임워크가 변경된 프로젝트 구성을 알도록 하기 위한 알림 표시이다.

    알림에서 <Get dependencies>를 클릭하면 자동으로 변경된 정보를 받아와서 파일이나 패키지를 사용할 수 있도록 한다. 

 

7. 위젯에서 이미지를 호출하는 방법에는 3가지가 있다. 

• file : 외부의 폴더나 갤러리에 있는 파일을 사용하는 경우
• memory : 배열이나 문자열 형태의 이미지 데이터를 사용하는 경우
• asset : 앱을 만들 때 미리 넣어놓은 파일을 사용하는 경우

   세 가지 방법 중 이전 단계에서 pubspec.yaml 파일에 assets로 선언했으므로 Image.asset(이미지 경로) 형태로 호출한다.

    imageWidget.dart 파일에 다음과 같이 작성한다.

 

8. main.dart파일을 열고 ImageWidget.dart 파일을 import 구문으로 추가한다.

     ImageWidget 클래스를 home으로 실행하면 새로운 앱에 추가한 이미지가 뜬다.

 

폰트 추가

1. 폰트를 추가하기 위해 이미지와 마찬가지로 새로운 Directory를 생성하고 원하는 폰트 파일을 끌어 넣는다. 

    이때 폰트 파일의 이름은 영어만 가능하다.

 

2. imageWidget.dart 파일을 열고 문자를 출력하는 Text 함수를 추가한 뒤 원하는 문장을 입력하고 style에 TextStyle() 함수를 이용해 텍스트 모양을 설정한다. fontFamilydpsms pubspec.yaml 파일에 설정한 폰트 이름을 입력한다.

 

 

코드 실행 결과

소스 파일을 저장 후 빌드하면 다음과 같은 결과가 나타난다.