【Flutter】FlutterGenを使う

image

FlutterGenとは

Flutterには画像や文字列などのリソースを安全にアクセス出来るようにするためのファイルを自動生成する機能はなく、 pubspec.yaml の assets に指定したリソースを文字列で指定しないといけません。これらの手間とタイポなどのリスクをなるべくなくせるように作られたパッケージがFlutterGenです。

コード自動生成の FlutterGen を作りました。

FlutterGenでできること

主に以下の3つです

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

FlutterGenのインストール

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_gen_runner: ^4.2.1
  build_runner: ^2.1.11

flutter_gen_runner

build_runner

flutter pub getを忘れずに。

FlutterGenを使う

assetsファイル内にディレクトリや画像またはフォントファイルがある。かつ、以下のようにpubspec.yamlにアクセスするファイルのパスが指定してあることが前提です。

  assets:
    - images/smile_picture.png
    - images/smile_icon.svg

  fonts:
    - family: notoSansJP
      fonts:
        - asset: fonts/notoSansJP.ttf

1.ファイルの生成

FlutterGenを使うために、build_runnerを使ってファイルを自動生成します。

$ flutter pub run build_runner build --delete-conflicting-outputs

lib/gen/assets.gen.dartファイルが自動生成されるはずです。 そのファイルには、assetsディレクトリ内においてある画像やフォントファイルなどのパス情報が書いてあります。

2.ファイルのパスを指定する

補完も表示されるのでとっても使いやすいです。

.pngや.jpegファイルなどの画像ファイル

普通に書く

Image.asset(
  'assets/images/smile_picture.png',
  width: 150.0,
),

FlutterGenを使用して書く

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

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

.svg ファイル(flutter_svg を使用しています)

普通に書く

final svg = SvgPicture.asset('assets/images/smile_icon.svg');

FlutterGenを使用して書く

final svg = SvgPicture.asset(Assets.images.smileIcon);

フォント(assets/font/にnotoSansJP.ttfをおいた場合)

普通に書く

fontFamily: "notoSansJP"

FlutterGenを使用して書く

//FlutterGenを使用
fontFamily: FontFamily.notoSansJP

最後に

思った以上に便利で感動しました。画像やフォントをたくさん使うプロジェクトには絶対に入れるべきだと思います。

参考

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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (99)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More