Package에서 Custom Asset 사용하기

회사에서 프로젝트를 모노레포를 관리하는데, 
공용 Package에서 사용하는 Asset의 경우 관리 방법이 조금 달라서 정리를 한다.

 

저자의 프로젝트 구조를 보면 아래와 같다.

패키지 설명을 하자면

• melos_project : 모노레포로 관리하기 위해 사용
• myproject : common, widgets에서 만든 위젯, 스타일, 칼라 등등을 사용하는 어플리케이션
• common : 고용 Color, TextStyle 등 관리
• widgets : 공용 widget을 만들어서 관리
• widgetbook : widgets 패키지에서 만든 widget을 테스트 하기 위한 프로젝트

일반적인 방법으로 common, widgets 프로젝트에서 Asset을 사용하다 보면 상위 프로젝트에서 문제가 발생

상위 프로젝트에서 Asset의 path를 잡는데 문제가 생기는듯하다.

 

Package 에서 Custom Asset을 사용하기 위한 설정

1. asset은 /lib 안에 넣는다.

 

2. pubspec.yaml 에 아래와 같은 식으로 작성

// image
assets: 
    - lib/assets/icon/   

// font
fonts:
  - family: Pretendard
    fonts:
      - asset: packages/widgets/assets/fonts/pretendard-regular.otf
        weight: 400
      - asset: packages/widgets/assets/fonts/pretendard-bold.otf
        weight: 700

  - family: Decimal
    fonts:
      - asset: packages/widgets/assets/fonts/decimal-book.otf
        weight: 400
      - asset: packages/widgets/assets/fonts/decimal-bold.otf
        weight: 700
  

 

3. image, TextStyle 관련 위젯 사용시 package 이름 넣는다.

SvgPicture.asset(
  'lib/assets/icon/user.svg',
  package: "widgets",
  width: 30,
  height: 30,
); // svg

TextStyle(fontWeight: FontWeight.w400, fontFamily: "Pretendard", 
fontSize: 20, package: "widgets"); // TextStyle

 

4. 어플리케이션 pubspec.yaml에 Package 포함

dependencies:
    common:
      path : ../../packages/common
    widgets:
      path : ../../packages/widgets

 

이렇게 하면 Package에서 Custom Asset 사용이 가능하다.