最近Flutter開発でつかったちょっとおすすめのパッケージ

公開日2025.06.13

#Flutter

エンジニア

Tsukamura

今回は最近使ってみて、ちょっといいかもと感じた 2 つのパッケージをご紹介します。大きく変わるわけではないですが、日々の開発が少し快適になります。

1. gap - 余白作りがちょっと楽になる

gap パッケージは、Column / Row で要素間の余白を作るときに使えるシンプルなパッケージです。いつもの SizedBox の代わりに使えます。

今までの書き方

普段はこんな感じで書いてました。

Column(
  children: [
    Text('ユーザー名'),
    SizedBox(height: 16),
    TextField(),
    SizedBox(height: 24),
    ElevatedButton(
      onPressed: () {},
      child: Text('送信'),
    ),
  ],
)

gap を使うと

同じことがこう書けます

Column(
  children: [
    Text('ユーザー名'),
    const Gap(16),
    TextField(),
    const Gap(24),
    ElevatedButton(
      onPressed: () {},
      child: Text('送信'),
    ),
  ],
)

使ってみた感想

見た目がちょっとすっきりで直感的
「余白を作ってる」という意図が分かりやすい

劇的に変わるわけではないですが、コードを読み返すときに「あ、16px の余白ね」って分かりやすくなります。

2. flutter_gen - アセットの管理がちょっと安心

flutter_gen は、画像やアイコンなどのアセットファイルに対して、型安全にアクセスできるコードを自動生成してくれるパッケージです。

今までの書き方

アセットを使うときは文字列でパスを書いてました。


// 画像を表示
Image.asset('assets/images/profile_icon.png')

// SVGアイコンを表示
SvgPicture.asset('assets/icons/home_icon.svg')

flutter_gen を使うと

こんな風に書けるようになります


// 画像を表示
Assets.images.profileIcon.image()

// SVGアイコンを表示
Assets.icons.homeIcon.svg()

設定方法

pubspec.yaml にこれを追加するだけです!


dev_dependencies:
  build_runner:
  flutter_gen_runner:

flutter_gen:
  integrations:
    flutter_svg: true

あとは flutter packages pub run build_runner build を実行すれば、自動でコードが生成されます。

生成されるコードの例

flutter_gen を実行すると、以下のような型安全なクラスが自動生成されます

/// GENERATED CODE - DO NOT MODIFY BY HAND
/// *****************************************************
///  FlutterGen
/// *****************************************************

class $AssetsImagesGen {
  const $AssetsImagesGen();

  /// File path: assets/images/profile_icon.png
  AssetGenImage get profileIcon =>
      const AssetGenImage('assets/images/profile_icon.png');

  /// File path: assets/images/background.jpg
  AssetGenImage get background =>
      const AssetGenImage('assets/images/background.jpg');
}

class $AssetsIconsGen {
  const $AssetsIconsGen();

  /// File path: assets/icons/home_icon.svg
  SvgGenImage get homeIcon =>
      const SvgGenImage('assets/icons/home_icon.svg');

  /// File path: assets/icons/search_icon.svg
  SvgGenImage get searchIcon =>
      const SvgGenImage('assets/icons/search_icon.svg');
}

class Assets {
  Assets._();

  static const $AssetsImagesGen images = $AssetsImagesGen();
  static const $AssetsIconsGen icons = $AssetsIconsGen();
}