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

> 最近のFlutter開発でおすすめのパッケージ「gap」と「flutter_gen」を紹介し、それぞれの機能や使い方、導入のメリットについて解説します。

- 公開日: 2025-06-13
- 著者: Tsukamura
- タグ: Flutter
- URL: https://tech.anycloud.co.jp/articles/good-package

---

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

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

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

### 今までの書き方

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

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

### gap を使うと

同じことがこう書けます

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

### 使ってみた感想

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

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

## 2\. flutter\_gen - アセットの管理がちょっと安心

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

### 今までの書き方

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

```dart

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

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

### flutter\_gen を使うと

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

```dart

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

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

### 設定方法

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

```yaml

dev_dependencies:
  build_runner:
  flutter_gen_runner:

flutter_gen:
  integrations:
    flutter_svg: true
```

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

### 生成されるコードの例

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

```dart
/// 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();
}
```

このコードが自動生成されることで、型安全なアセットアクセスが可能になります。

### 使ってみた感想

-   IDE の自動補完が効くのが Good!
-   ファイル名を変更したときの影響範囲が分かりやすい

「絶対に必要！」というほどではないかもですが、ちょっとストレスが軽減されます。 どちらのパッケージも「なくても困らないけど、あると少し嬉しい」という感じです。

`gap` は特に、レイアウトを組むことが多いプロジェクトだと地味に効いてきます。コードレビューのときも「ここの余白は何 px？」って確認しやすくなりました。

`flutter_gen` は、アセットファイルが多めのプロジェクトで重宝します。デザイナーさんからアイコンファイルをもらって追加するときも、自動補完で確認できるので安心感があります。

## まとめ

どちらも「開発体験がちょっと良くなる」系のパッケージです。導入コストも低いので、気になったら試してみてください。

### 参考リンク

-   [gap package](https://pub.dev/packages/gap)
-   [flutter\_gen package](https://pub.dev/packages/flutter_gen)