[Flutter] flutter_gen을 이용한 Asset 관리

저는 개발할 때 폰트, 색상, 이미지등을 관리할 때 어려움을 느낀적이 있었습니다.

아래 처럼 선언할 경우 관리 및 추적이 어려움.

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

 

flutter_gen을 사용하니 아래 처럼 사용가능함.

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

 

flutter_gen

flutter_gen은 플러터 프로젝트에서 Asset 관리 및 코드 자동 생성을 도와주는 도구입니다.

이 도구를 사용하면 Flutter에서 이미지, 폰트, 색상 등의 리소스를 더 간편하게 관리할 수 있습니다. flutter_gen을 사용하여 Asset을 관리하는 방법에 대해 단계별로 설명드리겠습니다.

 

1. pubspec.yaml에 추가 

dev_dependencies:
  build_runner:
  flutter_gen_runner:

 

2. Configuration 

flutter_gen:
  output: lib/gen/
  line_length: 120
  colors:
    inputs:
      - assets/colors/colors.xml

3. build_runner 실행

dart run build_runner build

 

저는 디자인에 관련된 패키지는 별도의 패키지로 분리하여 구성하였고, 아래처럼 디렉토리 구조를 만들게 되었습니다.

적용

저는 Font, Color를 정의해보겠습니다.

 

사용하기 전:

1. Color는 xml 파일을 통해 정의할 수 있음

2. font는 pubspec.yaml에 정의한 경로에 삽입

 

Configuration에서 asset 및 font의 경로를 지정하여 generate합니다.

flutter:
  assets:
    - assets/colors/
  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-thin.ttf
          weight: 100
        - asset: assets/fonts/Pretendard-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Pretendard-Light.ttf
          weight: 300
        - asset: assets/fonts/Pretendard-Regular.ttf
          weight: 400
        - asset: assets/fonts/Pretendard-Medium.ttf
          weight: 500
        - asset: assets/fonts/Pretendard-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Pretendard-Bold.ttf
          weight: 700
        - asset: assets/fonts/Pretendard-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/Pretendard-Black.ttf
          weight: 900

4. 결과

 

또한 svg파일을 사용할 경우 flutter_svg 속성을 변경해주면 svg파일에 대한 내용도 생성을 해줍니다. (Optinal 참조)

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

 

프로젝트 초기에 이런 것들을 구조화 해놓지 않으면 차후에 유지보수 할 때 굉장히 번거로운 작업이 될 수 있으니 이렇게 관리하는것도 좋은 방법이라고 생각합니다. 오늘도 빡코딩!