FlutterGenとは
FlutterGenはFlutterプロジェクトでのアセット管理を効率化し、開発プロセスをスムーズにするためのツールです。
できること
-
自動生成による直接アクセス
リソースファイル（画像、フォント、カラーなど）へのアクセスコードを自動生成し、手動でのファイルパス記述が不要になり、リソースへのアクセスが簡単になります。 -
コード補完によるタイポの防止
IDEのコード補完機能を活用して、リソース名のタイプミスを防止します。また正しいリソース名が自動的に提案され、開発速度と正確性が向上します。 -
静的解析によるエラー防止
FlutterGenが生成するコードは静的解析ができ、存在しないファイルを参照している場合や、リソースの指定に誤りがある場合に、コンパイル時にエラーが検出されます。
環境
- Flutter 3.16.9
- パッケージは以下を参照（初期から追加したもののみ記載しています）
dev_dependencies:
flutter_gen_runner: ^5.4.0
build_runner: ^2.4.7
管理方法
今回は画像、フォント、カラーの基本的な管理方法について説明します。
1.画像
(1)pubspec.yamlにアセットの指定を行います。（以下は例です）
flutter:
assets:
- assets/images/
画像配置例
(2) 自動生成
build_runnerを使ってファイルを自動生成します。
flutter pub run build_runner build --delete-conflicting-outputs
lib/gen/assets.gen.dartにファイルが自動生成されます。
こちらには、assetsディレクトリ内に配置した画像のパス情報が書いてあります。
(3) 使い方
通常の書き方だと以下のようになりますが、タイポ等に気づきにくいかとおもいます。
Image.asset(
'assets/images/sample_image.png',
width: 100,
height: 100,
),
FlutterGenを使用する場合は、以下のように記述できます。
①Image クラスとして使う場合
Assets.images.sampleImage.image(
width: 100,
height: 100,
),
②Stringとして使用する場合
Image.asset(
Assets.images.sampleImage.path,
width: 100,
height: 100,
),
(4) SVGの場合
SVGを表示したい場合には有名なところでいうとflutter_svg を使うことが多いかと思います。
FlutterGenではインテグレーション設定があり、pubspec.yamlに次のように設定することで、flutter_svg のSvgPictureを出力することができます。
flutter_gen:
integrations:
flutter_svg: true
通常
SvgPicture.asset(
Assets.images.sampleIcon.path,
width: 30,
height: 30,
),
設定後
Assets.images.sampleIcon.svg(
width: 30,
height: 30,
),
インテグレーション設定を行うことで、コードの統一性と簡潔さにより、何をしているのかが直感的に理解しやすくなります。
2.フォント
(1)pubspec.yamlでのフォントの設定
プロジェクトのpubspec.yamlファイルに、使用したいフォントと、そのフォントファイルへのパスを指定します。
例えば、RobotoMonoフォントを使用する場合、以下のように記述します。
fonts:
- family: RobotoMono
fonts:
- asset: assets/fonts/RobotoMono-Regular.ttf
- asset: assets/fonts/RobotoMono-Bold.ttf
weight: 700
配置例
(2) 自動生成
build_runnerを使ってファイルを自動生成します。
flutter pub run build_runner build --delete-conflicting-outputs
lib/gen/assets.gen.dartにファイルが自動生成されます。
(3) 使い方
フォントをDartコード内で使用する際は、自動生成されたFontFamilyクラスを通じて以下のように指定できます。
Text(
'Hello, World!',
style: TextStyle(
fontFamily: FontFamily.robotoMono,
),
),
3.カラー
(1)pubspec.yamlでのカラーアセットの指定
プロジェクトのpubspec.yamlファイルにカラーアセットのパスを指定することで、カラー定義を一元管理できます。以下はその設定例です。
flutter_gen:
colors:
inputs:
- assets/color/colors.xml
この設定により、assets/color/colors.xmlファイル内で定義されたカラーがflutter_genによって扱われるようになります。
配置例
プロジェクトのディレクトリにassets/color/colors.xmlファイルを配置します。
このファイルにはアプリケーションで使用するカラーの定義を含めます。
例えば、以下のように記述します。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="coffee">#8CF5CB84</color>
</resources>
この方法の利点は、Figmaなどのデザインツールからカラーコードを直接コピーしてcolors.xmlに貼り付けるだけで済む点にあります。
さらに、#8CF5CB84のようにカラーコードの先頭にアルファ値を指定することで、カラーの透明度を細かく調整できます。ここで8Cは透明度を、F5CB84はカラーをそれぞれ表しています。
透明度は16進数で00（完全に透明）からFF（完全に不透明）までの範囲で指定します。アルファ値の詳細な理解には、以下の記事が役立ちます。
なお、カラーコードの先頭のFF（完全に不透明）を省略することも可能です。省略した場合、色はデフォルトで不透明として扱われます。
アルファ値を省略する場合、カラーコードをコピペする際の手間が省けます。透明度を設定したい特定のケースでのみアルファ値を追加することで、作業の効率化が図れます。
アルファ値を常に指定する場合（FFを含める）は、カラーコードの記述に一貫性が生まれ、カラー定義を読む際の明確性が向上します。
これらは、プロジェクトの具体的な要件やチームの方針に基づいて選択すること大切です。
(2) 自動生成
build_runnerを使ってファイルを自動生成します。
flutter pub run build_runner build --delete-conflicting-outputs
lib/gen/assets.gen.dartにファイルが自動生成されます。
(3) 使い方
カラーをDartコード内で使用する際は、自動生成されたColorNameクラスを通じて以下のように指定できます。
Text(
'Hello, World!',
style: TextStyle(
color: ColorName.black,
),
),
カラーコードの管理が簡単になりました。