Flutter実践開発を読んでいいなと思い、
flutter_genを使ってみたときの備忘録(*´ω`*)
作者さんのブログ記事がわかりやすい
FlutterGenとは
Flutterでは画像などのファイルを指定する場合、
パスを文字列で指定する。
Widget build(BuildContext context) { return Image.asset('assets/images/profile.jpeg'); }
ただ、打ち間違いやいちいち確認しないといけないので、めんどう。。
コードを生成することで、補完が効くようになり、
安全&楽チンにリソースファイルを扱うことができるツール
Widget build(BuildContext context) { return Assets.images.profile.image(); }
インストール
Homebrew、Dart Command-line、build_runnerという、
3つのパターンで実行できる方法が用意されてる
# Homebrew $ brew install FlutterGen/tap/fluttergen $ fluttergen # Dart Command-line $ dart pub global activate flutter_gen $ fluttergen # build_runner $ fvm flutter pub add dev:build_runner dev:flutter_gen_runner $ fvm flutter pub get $ fvm flutter run build_runner build
HomebrewとDart Command-lineは単体で動くため生成速度が早く、
build_runnerは他のものと一緒に動くけど、その分時間がかかる感じ。
一般的なプロジェクトだと、build_runnerで十分っぽく、
コマンドを打ち直すのも大変なので、build_runner方式にした
設定
pubspec.yaml
でいろいろ設定できる
# pubspec.yaml 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 colors: inputs: - assets/color/colors.xml
カラーリストも生成できて、こんなXMLを入力できる
<color name="milk_tea">#F5CB84</color> <color name="cinnamon" type="material">#955E1C</color> <color name="yellow_ocher" type="material material-accent">#DF9527</color>
使い方
自動生成されたファイルはこんな感じで使える
integrationsを使うと、対応した関数が生えてくる感じ
font名やcolor名も自動生成してくれる
// assets.gen.dart final AssetImage assetImage = Assets.images.profile; final Image image = Assets.images.profile.image(/*...*/); final String path = Assets.images.profile.path; final ImageProvider provider = Assets.images.profile.provider(/*...*/); // integrations : flutter_svg final SvgPicture svg = Assets.images.profile.svg(/*...*/); // colors.gen.dart final Color color = ColorName.cinnamon; // fonts.gen.dart final String fontname = FontFamily.robotoMono;
以上!! 便利。。(*´ω`*)