【Flutter/コード自動生成】FlutterGenを使ってみる。

こんにちは。最近はニホンザルにハマっているminako-phです。
※おすすめの猿山があったら教えてください

昨日、@wasabeef_jp さんが このようなTweetをされてらっしゃいました。

書いた / コード自動生成の FlutterGen を作りました。 https://t.co/nNOMDG7q1c #flutter #flutterdev

— ᴅᴀɪᴄʜɪ ғᴜʀɪʏᴀ / ᴡᴀsᴀʙᴇᴇғ (@wasabeef_jp) September 7, 2020

Flutter向けに画像リソースなどのコードを自動生成するためのツールです。

ちょうど iOS開発の時に使っていた R.swift みたいなツール無いかなーと探していたタイミングだったので、
おおお.....！！これは！！🎉 となり早速試してみました。

何ができるのか

• 自動生成により画像などのリソースファイルへアクセスできるようになる
• 実装する時にコード補完が効くのでタイポしなくなる
• 静的解析ができるので存在しないファイルの指定などによる実行時のエラーを防ぐ

この記事の概要

FlutterGenについては作者のわさびーふさんが日本語で詳しく書いてくださっているので
この記事ではシンプルにFlutterGenを導入するとこから、
コード自動生成によるコード補完を実際に体験するまでを試してみました。

FlutterGenのインストール

今回は Homebrew でインストールしました。

$ brew install FlutterGen/tap/fluttergen

インストールが終わったら使用できる事を確認してみましょう

$ fluttergen -h

今回はHomebrewを使用しましたが 他にも、
Dart Command-line や build_runner が用意されています✔️

実際に使ってみる

コードの自動生成を実行する

今回は３種類の画像とフォントを用意しました。それぞれを assets/ 配下に配置します。

pubspec.yaml に追加できたら、次にFlutterGenによるコードの自動生成を実行します。
パスはプロジェクトの pubspec.yaml へのパスを指定します。

$ fluttergen -c ./pubspec.yaml

すると一瞬でコードの生成が完了しました！

実際にエディタで使用してみる

assets/images/ 配下の画像を指定したいので、Assets.images. と入力してみます。

すると以下のように、コード補完機能が使用できるようになっている事が確認できます👏！

これでタイポを気にせずスピーディーに実装できるようになりました！
とっても快適 ....... ><✨

公式でも解説されていますが、対象ファイルがFlutterで対応してる画像フォーマットの場合、
Assets.images.warauEbifried で AssetImage classとして使え、実際に描画する際は
Assets.images.warauEbifried.image(...) とする事で Image class として
Assets.images.warauEbifried.path で String として使えます。

• 普通に書くと ↓

// 文字列指定する為 タイポしやすい...
Image.asset(
  'assets/images/warau_ebifried.png',
  width: 150.0,
),

• FlutterGenを使用して書くと ↓

// Image classとして使用する. Image classが持つパラメーターを使用できます
Assets.images.warauEbifried.image(
  width: 150.0,
),

// Stringとして使用する
Image.asset(
  Assets.images.warauEbifried.path,
  width: 150.0,
),

今回のようにディレクトリ名が assets/ もしくは asset/ の場合は冗長となる為 省略されますが、
Assets.directoryName.directoryName.fileName のように階層をそのまま使用できるようになっています。

フォントでも使ってみましょう。
以下のようにStringとしてコード補完ができることが確認できます👏！

フォントの場合 FontFamily.notoSansJP のように指定が出来ます。

感想

ファイル名やディレクトリを追ってコピペして貼り付けて や 定数宣言して... みたいな
地味にコストのかかる作業が解消されとても快適になりました ><✨ 有り難いです ..

他にも出来ることなど詳しくは公式も是非ご覧ください！

参考

コード自動生成の FlutterGen を作りました。
Github｜FlutterGen/flutter_gen
pub.dev｜flutter_gen