【Flutter】実務未経験でも知っておきたい！現場で使えるパッケージ33選（2024年版）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/46dfdbff-3bfb-f7b4-251c-891d12f16c18.png)
## はじめに

私は未経験エンジニアとして現場に入ってからもうすぐ１０ヶ月が経とうとしています。
実務を通して様々なパッケージに触れる機会がありました。
今回はそんな私の経験を通してこれは有用だなと感じた、あるいはFlutterエンジニアとして学習すべきと感じたパッケージを紹介していこうと思います。
なお、私の独断と偏見で各パッケージをグルーピングしてご紹介しています。

### 記事の対象者

- 実務未経験でこれからスキルを身につけたい方
- Flutterにはそこそこ慣れてきたけど、さらに重要なスキルを身に付けたい方
- 実務には入っているけど、色々なパッケージを知りたいと考えている方

## 1. UI編

### 1-1. gap

https://pub.dev/packages/gap

gapは`Column`や`Raw`の中で指定したピクセル数の空白を挿入できます。
とても単純な内容ですが、`SizedBox`よりもわずかにではありますが、簡潔に記述できます。

```dart
return Column(
  children: <Widget>[
    Container(color: Colors.red, height: 20),
    const Gap(20), // Adds an empty space of 20 pixels.
    Container(color: Colors.red, height: 20),
  ],
);
```
### 1-2. flutter_native_splash

https://pub.dev/packages/flutter_native_splash

アプリを起動した時に表示されるスプラッシュ画面を簡単に実装できるパッケージです。
基本的な設定をyamlファイルに書くのと、画像を用意しなければいけませんが、コツさえ掴めば簡単に導入できます。
以下は私が参考にさせて頂いた方の記事です。

https://zenn.dev/susatthi/articles/20220406-061305-flutter-native-splash

### 1-3. carousel_slider

https://pub.dev/packages/carousel_slider

その名の通りカルーセルを簡単に実装することができるパッケージです。
私は最初に自力で実装しようとしてみたのですが、思いの外手間がかかりました。
しかし、このパッケージを使えば簡単に導入することができます。
いいねも脅威の5.6kと、安定感抜群のパッケージです。

```dart
CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)
```

### 1-4. flutter_reorderable_grid_view

https://pub.dev/packages/flutter_reorderable_grid_view

flutterには`ListView`形式の並び替えができるWidgetとして`ReorderableListView`が標準で用意されています。

https://api.flutter.dev/flutter/material/ReorderableListView-class.html

しかし、GridView形式では用意さていません。そこで登場するのがこのパッケージです。
並び替えに対応させたいGridViewをラップする形で使えるので、扱いやすいです。

```dart
 return Scaffold(
      body: ReorderableBuilder(
        children: generatedChildren,
        scrollController: _scrollController,
        onReorder: (ReorderedListFunction reorderedListFunction) {
          setState(() {
            _fruits = reorderedListFunction(_fruits) as List<String>;
          });
        },
        builder: (children) {
          return GridView(
            key: _gridViewKey,
            controller: _scrollController,
            children: children,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              mainAxisSpacing: 4,
              crossAxisSpacing: 8,
            ),
          );
        },
      ),
    );
```

### 1-5. cached_network_image

https://pub.dev/packages/cached_network_image

インターネットからダウンロードしてきた画像を表示し、データをキャッシュに保存する仕組みを提供するパッケージです。
毎回ダウンロードしてしまうとその分ユーザーの通信量の負担になってしまいます。そこで一度ダウンロードしてきたデータであればローカルのキャッシュデータを使用する、ということをしてくれます。
こちらも6.4kいいねを獲得している定番パッケージです。

```dart
CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),
```

### 1-6. shimmer

https://pub.dev/packages/shimmer

画像をローディングしている時によく出てくるキラキラしたローディング表現を簡単に実装できるパッケージです。
ちょっと言葉で表現するのが難しい😓ですので公式にデモが貼ってあるのでご確認ください。
こちらも5kいいねをもらう定番パッケージです。

```dart
SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);
```

### 1-7. responsive_framework

https://pub.dev/packages/responsive_framework

様々なサイズのデバイスにおいて、UIの出し分けたりすることを簡単にしてくれるパッケージです。
各デバイスのブレークポイントを設定し、各画面でブレークポイント毎のUIであったり設定を簡単に呼び出せます。
私はタブレット対応でお世話になりました。
こちらも3kいいねを獲得している安定パッケージです。

```dart
import 'package:responsive_framework/responsive_framework.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveBreakpoints.builder(
        child: child!,
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: 1920, name: DESKTOP),
          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
        ],
      ),
      initialRoute: "/",
    );
  }
}
```

### 1-8. flutter_launcher_icons

https://pub.dev/packages/flutter_launcher_icons

アプリアイコンをデバイスまたはOSごとに簡単に作成してくれるツールです。
アイコン画像の用意と設定ファイルをyamlで簡単に書けば、
あとはコマンドを叩くだけで簡単に生成することができます。

## 2. 機能編
いわゆるデバイスやOSに備わっている機能を呼び出したり、なんらかの付加機能を提供したりするパッケージです。

### 2-1. screen_protector

https://pub.dev/packages/screen_protector

アプリを展開している場合にスクリーンショットや画面録画を禁止にするパッケージです。
用途は限られますが、例えば有料コンテンツでSNSなどに掲載させたくない、などの場合に有効です。
以前書いた記事がありますので、詳細はそちらで確認してみてください。

https://qiita.com/Harx02663971/items/959e8c176625e8e27edb

### 2-2. share_plus

https://pub.dev/packages/share_plus

SNSでよく出てくる、「この内容をXxxを使って共有」を簡単に実装できるパッケージです。
とても簡単に実装できます。
こちらも3kオーバーの安定パッケージです。

```dart
await Share.share(
  text,
  subject: subject,
  sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size,
);
```

以下の記事を参考にさせていただきました。

https://qiita.com/MLLB/items/ae052699bfe3b852fa6c

テストする時はちょっと工夫が必要です。その場合は以下を参考にすると良いと考えます。

https://qiita.com/greendrop/items/c6626f749fe5d7b201f4

### 2-3. local_auth

https://pub.dev/packages/local_auth

生体認証を簡単に実装できるflutterが用意しているパッケージです。
近年ではiOS18またはAndroid15などOS側でアプリをロックしたり非表示にしたりする機能が搭載されています。
しかし、アプリの中の特定の画面やコンテンツに生体認証のロックをかける需要もまだあります。
そんな時にはこのパッケージの出番です。

記事はまだ書けていないのですが、お試しで作ったものがありますのでよろしければ参考にしてみてください。

https://github.com/HaruhikoMotokawa/sample_local_auth

設定方法など基本的なことは以下を参考にさせていただきました。

https://zenn.dev/msmr/articles/1c57c4a2e2e120

## 3. ルーティング編

### 3-1. go_router

https://pub.dev/packages/go_router

画面遷移をより便利に管理することができるパッケージです。
4.9kいいねがついていることからもわかる通り、様々なプロジェクトで使用されていると考えられます。
学習コストは高いほうだと考えられますが、学んで損のないパッケージです。

入門的な内容は以下の動画で学習しました。

#11 Flutter入門講座 go_router編
ルビーDog

https://youtu.be/9lRpNOwHH4Y?si=1ehN62FGx1XByWGq

### 3-2. go_router_builder

https://pub.dev/packages/go_router_builder

上記で述べたgo_routerを拡張するパッケージです。
このパッケージを使うとgo_routerでは成し得なかった型安全に値渡しを行えるようになったり、`NavigationBar`を`ShellRoute`または`StatefulShellRoute`で実装することができます。
このパッケージも学習難易度が高いですが、一度理解できれば高度な画面遷移管理ができるようになります。

以下の記事で私は学習しました。

https://zenn.dev/susatthi/articles/20220801-135028-flutter-go-router-builder

https://qiita.com/tomohip/items/d193b8577971d818684c

https://qiita.com/wattah/items/9882ebbc58571bfbc1f2

また現場で学んだ知識をもとに書いた記事でも触れているので、興味のある方は見てみてください。

https://qiita.com/Harx02663971/items/9a7796068fdb04bbaa61

## 4. データ永続化

### 4-1. sheard_preferences

https://pub.dev/packages/shared_preferences

データの永続化、基本中の基本であるパッケージです。
キーとバリューの組み合わせでローカルデータベースに保存する仕組みを提供します。
アプリの設定などの基本情報を保存する場合によく使用するため、マストで学ぶべきパッケージだと考えます。
いいねも9.8kでその圧倒的人気と安定感が伺えます。


```dart
// Write data

// Obtain shared preferences.
final SharedPreferences prefs = await SharedPreferences.getInstance();

// Save an integer value to 'counter' key.
await prefs.setInt('counter', 10);
// Save an boolean value to 'repeat' key.
await prefs.setBool('repeat', true);
// Save an double value to 'decimal' key.
await prefs.setDouble('decimal', 1.5);
// Save an String value to 'action' key.
await prefs.setString('action', 'Start');
// Save an list of strings to 'items' key.
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);
Read data

// Read data

// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');
// Try reading data from the 'repeat' key. If it doesn't exist, returns null.
final bool? repeat = prefs.getBool('repeat');
// Try reading data from the 'decimal' key. If it doesn't exist, returns null.
final double? decimal = prefs.getDouble('decimal');
// Try reading data from the 'action' key. If it doesn't exist, returns null.
final String? action = prefs.getString('action');
// Try reading data from the 'items' key. If it doesn't exist, returns null.
final List<String>? items = prefs.getStringList('items');
```
以下の動画で基本を学ぶことができます。

#30 Flutter入門講座 shared_prefs編
ルビーDog

https://youtu.be/eNP7eotwpH4?si=l7tNqMSoRjxVO1uC

私の記事ではちょっとアレンジして使っていますが、お時間がある方は読んでみてください。

https://qiita.com/Harx02663971/items/1e9d8efc68c88385ac7a

### 4-2. flutter_secure_storage

https://pub.dev/packages/flutter_secure_storage

iOSではKeychain、AndroidではKeyStoreを使ってデータを保存してくれるパッケージです。
先に述べたshared_preferencesと違うのはデータをセキュアに保存する目的で使用する点です。
具体的にはパスワード、ログイン後に取得したアクセストークンなど外部に漏れてはいけないデータを保存する用途です。
昨今ではアプリを使用するためにサービスのアカウントにログインすることはほぼ必須のため、こちらも学ぶべきパッケージの一つです。

```dart
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

// Create storage
final storage = new FlutterSecureStorage();

// Read value
String value = await storage.read(key: key);

// Read all values
Map<String, String> allValues = await storage.readAll();

// Delete value
await storage.delete(key: key);

// Delete all
await storage.deleteAll();

// Write value
await storage.write(key: key, value: value);
```

ただし、shared_preferencesと違って若干取り扱いに注意が必要です。
以下の記事が参考になったのでおすすめです。

https://zenn.dev/beeeyan/articles/3f338941b45197

### 4-3. isar

https://pub.dev/packages/isar

複雑な情報を扱うことに長けたデータベースのパッケージの一つです。
ローカルデータベースでは現状定番のものがFlutterにはない印象ですが、
私が現場で扱ったこのisarはなかなか機能が豊富で高速なデータベースだと思います。
学習コストは高いですが、使いこなせればデータの扱いには困らないでしょう。

```dart
final newEmail = Email()..title = 'Amazing new database';

await isar.writeTxn(() {
  await isar.emails.put(newEmail); // insert & update
});

final existingEmail = await isar.emails.get(newEmail.id!); // get

await isar.writeTxn(() {
  await isar.emails.delete(existingEmail.id!); // delete
});
```

公式のドキュメントも丁寧に描かれているので、学習はしやすいでしょう。

https://isar.dev/ja/

私もいくつか記事を書いていますので、参考にしてみてください。

https://qiita.com/Harx02663971/items/76d0121e7ac240a97e99

https://qiita.com/Harx02663971/items/b9078ed29bd9b86cf44f

https://qiita.com/Harx02663971/items/13a3cd93d599c792b88e

## 5. 状態管理

### 5-1. riverpod

https://pub.dev/packages/riverpod

公式サイト

https://riverpod.dev/

Flutterでアプリ開発を行うなら必須といっても過言ではないパッケージです。

開発者のRemi Rousseletさんによるパッケージの説明によると *リアクティブキャッシュとデータバインディングフレームワーク* とのこと。

平たく言えばアプリで使用する状態をグローバルな値として宣言し、どこからアクセスしても同じ状態を取得できるようにすることができるものです。
さらにアーキテクチャ関連でよく聞かれる依存性の注入（DI）などにも用いられます。
学習コストは高いですが、Flutterエンジニアを目指すのなら必須項目だと思います。
さらにriverpodにはver1系、２系とありそのバージョンによって内容が異なります。
ざっくりいうと、非推奨になったメソッドが多くあったり自動生成を主体にしたコードへ変わっていたりします。
その点、昔の記事を見て最近の記事を見ると混乱するので注意が必要です。

以下は私が学習する上で参考にした動画、書籍、記事です。全体像を掴むには以下の動画のシリーズがおすすめです。

**Riverpod(リバーポッド)完全ガイド #Flutter 1/4**
ルビーDog

https://youtu.be/0HVru4WtdWo?si=wwJjvOpDVRrjqbJW

慣れてきたら書籍での学習をしてみましょう。

https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction

https://zenn.dev/chooyan/books/92a0a489f68233

こちらの記事はAsyncValueについて解説されてますのでおすすめです。

https://zenn.dev/tsuruo/articles/52f62fc78df6d5#when%E3%83%BBwhenornull%E3%83%BBmaybewhen

私もいくつか記事を書いてますので、参考にしてみてください。

https://qiita.com/Harx02663971/items/e04b059f5148c34f7a60

https://qiita.com/Harx02663971/items/6465dea27599a3afa7c7

### 5-2. flutter_hooks

https://pub.dev/packages/flutter_hooks

エフェメラルステート（またはローカルな状態）を扱いやすくするパッケージです。
riverpodはグローバルな状態管理やDIなどについてを扱うパッケージでしたが、こちらはより狭い範囲での状態管理に適しています。
ちなみにこのパッケージもriverpodの開発者であるRemi Rousseletさんが手がけたものです。

Flutterには標準で`StatefulWidget`が用意されていますが、書き方が冗長です。
flutter_hooksでは簡潔に書くことができます。
また、ライフサイクルに関連する処理やテキストコントローラー関連なども簡素に書くことができます（他にもたくさんの便利機能がある）。

こちらはプロジェクトによっては`StatefulWidget`を使っているかもしれませんが、私はこちらの方が書き方もシンプルで良いと感じています。

以下はおすすめの動画です。

**Hooks(フック)要点解説 #Flutter**
ルビーDog

https://youtu.be/Mbz6tGXYYL4?si=HTbxw_kp4jDc0TT7

関連する記事を私も書いてますので宜しければご覧ください。

https://qiita.com/Harx02663971/items/6465dea27599a3afa7c7#2-1-asyncvalue%E3%81%A8%E3%81%AF

※ この記事の *3. 値を引数で渡したり、useStateでの管理を検討する* で少し触れてます。

https://qiita.com/Harx02663971/items/1e07bbb32abf0ea1f477

## 6. ロジック&便利編

### 6-1. freezed

https://pub.dev/packages/freezed

モデルを作成した際に高頻度で定義することになる以下のコードを自動生成してくれる便利ツールです。

- コンストラクタとプロパティ定義
- オーバーライドtoString、operator ==​hashCode
- jsonへの変換メソッド
- copyWithオブジェクトを複製するメソッド
- シリアル化（デシリアライゼーション）を処理

これらを実装しようとすると数百行の記述が必要ですが、それを大幅に低減出来ます。
ちょっと便利さの伝わりづらい内容ですが、開発を続けていくとそのありがたみがわかってきます。
できるだけ初期段階で慣れておくと良いと考えます。

**#17 Flutter入門講座 freezed編**
ルビーDog

https://youtu.be/m0O9lS4rUPs?si=mrOGg3gVMBUEhRKF

### 6-2. envied

https://pub.dev/packages/envied

コード上に定義する機密情報へ難読化の処理をかけて、解析しづらくするパッケージです。
主な用途はAPIキーなどです。
こちらも用途は限定的ですが、実務では必須の知識なので覚えておきましょう。

以下はおすすめの動画＆記事です。

**#27 Flutter入門講座 envied編**
ルビーDog

https://www.youtube.com/watch?v=5C0MFSIH5qI

https://qiita.com/myzw1mt3/items/1543c3e1307fb89279fa

## 7. インターネット通信編

### 7-1. dio

https://pub.dev/packages/dio

APIでのやりとりを行うのに使用するHTTPクライアントパッケージです。
特定のサービスにアクセスして情報を取得したり、送信したりする際に使用します。
個人開発では便利なFirebase StoreやFirebase Storageですが、企業は基本的に自前のサーバーを持っており、そこに対してAPIによるやり取りを行なっています。
無料のAPIを提供しているサービスなどもあるので、早い段階で扱いに慣れておくと良いと考えます。

以下は私が参考にした記事です。

https://terupro.net/flutter-api-dio-sample/

### 7-2. flutter_appauth

https://pub.dev/packages/flutter_appauth

OAuth2.0を使用しての認証と認可を簡単に行えるようにするパッケージです。
企業側が用意したログインのフローをこのパッケージを使って実装することができます。
アカウント機能としてはFirebase Authenticationが有名ですが、企業によっては独自のAPIを用意していることも多いにあるので、このパッケージを通してOAuth2.0を勉強しておくのも良いと考えます。

以下の記事で触れていますので参考にしてみて下さい。

https://qiita.com/Harx02663971/items/9a7796068fdb04bbaa61

### 7-3. url_launcher

https://pub.dev/packages/url_launcher

アプリ内からアプリ内ブラウザ、または外部ブラウザを開いて特定のウェブサイトを開くことができるパッケージです。
外部のサイト例えばヘルプページやホームページなどに遷移させることはよくあるため、よく使うパッケージだと思われます。

以下の記事で紹介しているので参考にしてみて下さい。

https://qiita.com/Harx02663971/items/7064c529dfeab69bf5bc

記事内でも紹介していますが、アプリ経由でのブラウザ展開についての詳細は以下の記事が大変参考になります。

https://zenn.dev/tsuruo/articles/56f3abbb132f90

## 8. 開発サポート編

### 8-1. logger

https://pub.dev/packages/logger

開発時におけるデバックコンソールに出すログをカスタマイズするパッケージです。
主な利点は2つあると考えおります。
一つ目は通常のprint文よりも見た目がわかりやすくなる点です。

![スクリーンショット 2024-12-14 19.09.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/6b6c9039-fb44-6f8e-6148-3715e8acc851.png)

二つ目はセキュリティーの問題です。通常の`print`だとリリース版に入ってしまい、不要なコードであると同時にセキュリティー的にもよくありません。

使い方も非常に簡単ですので、ぜひ使ってみて下さい。

### 8-2. mockito

https://pub.dev/packages/mockito

アプリ開発におけるテストコードの作成を補助してくれるパッケージです。
具体的には特定の機能をモックしたい場合に使用します。
使用用途は限定的、かつ難しい内容でもありますがテストを書くなら必須の内容です。

以下の記事でも紹介していますので、参考にしてみて下さい。

https://qiita.com/Harx02663971/items/53364b9dadb46f381771#3-1-mockitoの導入

### 8-3. derry

https://pub.dev/packages/derry

こちらは普段よく使うshellのコマンドをスクリプトとして簡単に呼び出せるようにするパッケージです。
使用用途は限定的ですが、例えばbuild_runnerを走らせる以下のようなコマンド

```shell
flutter pub run build_runner build --delete-conflicting-outputs
```

これを`derry br`とか`derry build_run`などの好きなコマンドとして登録することができます。
以下の記事で紹介していますので、参考にしてみて下さい。

https://qiita.com/Harx02663971/items/55e649adc0002c14912b#2-6-余談スニペットとしても使える

記事内では *2. derryを使って効率よく出力する* にて解説しています。

## 終わりに
未経験から始めた私が10ヶ月間の実務を通じて触れたパッケージの中から、特に有用だと感じたものを紹介しました。
これらのパッケージは、開発を効率化し、より良いプロダクトを作るための重要なツールです。
それぞれのパッケージを活用することで、Flutterエンジニアとしてのスキルを一段と高めることができると確信しています。

特に未経験や実務経験の浅い方々にとっては、どのパッケージを優先的に学ぶべきか迷うこともあるかと思いますが、まずはこの記事で紹介したものを手に取ってみてください。

最後に、この記事が皆さんのスキル向上の一助となり、Flutter開発がさらに楽しいものになることを願っています。