flutter_gen 패키지를 이용하여 asset 사용하기

일반적으로 경로에서 이미지나 폰트를 불러오는 경우에는 아래와 같이 문자열로 경로나 폰트 명을 지정한다.

Widget image() {
  return Image.asset('assets/images/profile.jpeg');
}

Widget text() {
  return Text("hello", style: TextStyle(fontFamily: "Pretendard"));
}

하지만 이러한 경우에는 오타 등과 같은 휴먼 에러의 위험성이 있고, 유지보수 측면에서도 그다지 좋은 점이 없다. 

flutter_gen

flutter_gen | Dart Package

flutter_gen 패키지는 pubspec.yaml에 지정한 asset들을 코드 제너레이터를 통해 dart 파일로 추출해주는 패키지이다. 이를 통해 위에서 말했던 일반적인 경우에서의 단점들을 해결할 수 있다. 사용법도 매우 간단하다.

Intallation

pubspec.yaml에 종속성을 추가하고 flutter pub get을 실행한다.

dependencies:
  flutter_gen: 

dev_dependencies:
  build_runner: 
  flutter_gen_runner:

Configuration File

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  line_length: 80 # Optional (default: 80)

  # Optional
  integrations:
    flutter_svg: true
    flare_flutter: true
    rive: true
    lottie: true

flutter:
  uses-material-design: true
  assets:
    - assets/images/

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf

FlutterGen은 pubspec.yaml의 flutter와 flutter_gen key를 기반으로 하여 dart 파일을 생성한다. 

어떤 경로에 추출할지, flutter_svg나 lottie와 같은 패키지를 사용할 지의 여부 등은 속성으로 추가할 수 있다. 

Generate dart file

아래 커맨드를 실행하면 pubspec.yaml에 설정한 경로로 dart file이 생성된다. 만약에 경로를 지정하지 않았다면 lib/gen/에 file이 생성된 것을 확인할 수 있을 것이다.

dart run build_runner build

 

Usage

생성된 파일로부터 asset을 사용할 수 있다. 사용법은 아주 간단하다.

Image

예를 들어 assets/images/chip.jpg 파일을 flutter_gen을 통해서 dart file로 추출했다고 한다면 다음과 같이 사용할 수 있다.

Widget build(BuildContext context) {
  return Assets.images.chip.image();
}

Widget build(BuildContext context) {
  return Assets.images.chip.image(
    width: 120,
    height: 120,
    fit: BoxFit.scaleDown,
  );

Widget build(BuildContext context) {
  // Assets.images.chip.path = 'assets/images/chip3/chip3.jpg'
  return Image.asset(Assets.images.chip.path);
}

flutter_gen을 사용하면 파일의 경로뿐만 아니라, AssetImage, Image, ImageProvider로 반환을 해주기 때문에 바로 위젯으로 사용할수 있다.

나 같은 경우에는 svg 파일도 사용하고 있어 flutter_svg 속성을 true로 설정해주었는데, svg 역시 사용법은 위와 동일하다.

 

Font

Text(
  "hello",
  style: TextStyle(fontFamily: FontFamily.pretendard)
)

FontFamily class 안에 해당 폰트를 가져올 수 있는 getter 메서드가 정의되어 있어 단순하게 가져다 쓰면 된다.