マルチパッケージのFlutterアプリでのassetの扱い

はじめに

melosを使ったマルチパッケージアプリで、アプリのパッケージではなく、featureパッケージなどにassetを起きたい時の方法のメモです。

そのまま使う時

feature_settingというパッケージでyumemi_logo.pngという画像を使いたい場合

いつも通りpubspec.yamlにassetsのパスを指定

packages/features/setting/pubspec.yaml

flutter:
  assets:
    - assets/

asset名の他に、packageを指定する。

利用するdartコード

Image.asset(
  'assets/yumemi_logo.png',
  package: 'features_setting',
),

flutter_genを使う場合

flutter_genを使う場合

pubspec.yamlでpackage_parameter_enabledを指定する。

packages/features/setting/pubspec.yaml

flutter:
  assets:
    - assets/

flutter_gen:
  assets:
    outputs:
      package_parameter_enabled: true

利用するdartコード

Assets.yumemiLogo.image(),

応用：汎用assetをパッケージにまとめる

ゆめみのテンプレートプロジェクトではdesignsystemパッケージに汎用assetを置く作りにしています。

やり方は、flutter_genを使う場合をベースに、以下をlibに追加します。

packages/cores/designsystem/lib/common_assets.dart

import 'package:cores_designsystem/src/gen/assets/assets.gen.dart';

// パッケージ毎に生成されるAssetsクラスと区別するため、直接exportせず別名をつける
typedef CommonAssets = Assets;

他のパッケージからこんな感じに使えます

import 'package:cores_designsystem/common_assets.dart';

class LicensePageRoute extends GoRouteData {
  const LicensePageRoute();

  static const path = 'license';

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return LicensePage(
      applicationIcon: CommonAssets.yumemiLogo.image(height: 100, width: 100),
    );
  }
}

まとめ

メモ程度ですが