はじめに
皆さん、Flutter プロジェクトで作業する際、ついつい入れてしまう「お気に入りのパッケージ」はありますか？
もちろん、プロジェクトの特性によって使うパッケージは変わってきますよね。
そこで今回は、私自身が「どんなプロジェクトでも、まずこれを入れる！」と決めている、使用頻度の高いスタメンパッケージを厳選してご紹介します。
パッケージ紹介
hooks_riverpod / flutter_hooks
riverpodは Flutter の開発コミュニティで特に人気知名度が高い状態管理パッケージの一つです。その中に、riverpod のパッケージは 3 種類があります。（riverpod、flutter_riverpod、hooks_riverpod）
そして、今回皆さんに紹介したいのはhooks_riverpodです。
hooks_riverpodと他の 2 種類のriverpodとのもとも大きなの差は、hooks_riverpodは hooks と連携できる点です。ただし、hooks と連携するために、flutter_hooksも別途に追加する必要があります。
hooks_riverpodとflutter_hooksを使用すると、Flutter のウィジェットを作成する際にref.watchとuseStateなどな機能を同時に使用出来るなり、状態管理など凄く便利になります。
https://pub.dev/packages/hooks_riverpod
auto_route / auto_route_generator
皆さんが Flutter プロジェクトの実装を行いする際に、どんな仕組みを利用しますでしょうか。Flutter には本来 SDK の中にはすでに標準のルーティング方法、Navigator.pushNamedなどを搭載しております。ただし、この標準的な方法は、型安全性が欠如しているという課題があります。そこで、auto_routeはルートや引数もコンパイル時チェックの機能があり、型安全性の特徴があります。
https://pub.dev/packages/auto_route / https://pub.dev/packages/auto_route_generator
flutter_launcher_icons
皆さんはアプリアイコンを適用するの際に、OS ごとの設定に手間がかかると感じたことはありませんか？
Flutter には、flutter_launcher_iconsというほぼ一つのコマンドで iOS / Android 両方のアイコン設定を適用してくれる、凄く便利のパッケージがあります。
flutter_launcher_iconsを利用し、アプリアイコンを適用するの方法は二つがあります。
- config ファイルを生成し、その後 config ファイルの設定のようにアイコン設定を適用
dart run flutter_launcher_icons:generate
dart run flutter_launcher_icons
-
pubspec.yamlの中にあるのflutter_launcher_icons設定を使用し、アイコン設定を適用する
dart run flutter_launcher_icons
＊flutter_launcher_icons使用し、生成された iOS のものの例
https://pub.dev/packages/flutter_launcher_icons
gap
ウィジェット間に余白を追加する際、SizedBox では少し記述が長くなりがちです。Gapパッケージを使えば、Gap(20)のように書くだけで間隔を追加でき、より簡潔で直感的にレイアウトを調整できます。
dio
dioは、Flutter SDK に含まれている http パッケージとは異なり、実務で求められる多くの機能を網羅した HTTP クライアントです。例えば、http パッケージでは手間がかかるタイムアウト設定を簡単に行えたり、BaseOptionsでベース URL や共通ヘッダーなどを一元管理できたりします。さらに、インターセプター機能も利用できるなど、非常に強力で便利なパッケージです。
final dio = Dio();
dio.options = BaseOptions(
baseUrl: 'https://api.example.com/v1', // ベースURL
connectTimeout: const Duration(seconds: 5), // 接続タイムアウト
receiveTimeout: const Duration(seconds: 3), // レスポンス受信タイムアウト
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
);
json_serializable
API との通信で必須となる、JSON と Dart オブジェクトの相互変換。その面倒な fromJson/toJson の定型コードを、コード生成によって完全に自動化してくれるのがjson_serializableです。
モデルクラスに@JsonSerializableアノテーションを付けてbuild_runnerを実行するだけで、変換ロジックが*.g.dartファイルへ自動で書き出されます。
これにより、キーの打ち間違いを防止でき、開発効率が向上します。
https://pub.dev/packages/json_serializable
build_runner / flutter_gen_runner
Flutter の開発を進めていると、定型的なコードなどを自動で生成したい場面がよくあります。その際に代表的な選択肢となるのが、build_runnerとflutter_gen_runnerというパッケージです。
build_runnerは、コード生成処理を実行するための汎用的なツールであり、json_serializableやauto_route_generatorといった様々なビルダーパッケージと連携し、データクラスやルーティングコードなどを生成します。
一方、flutter_gen_runnerは、画像やフォントといったプロジェクトのアセットを型安全に参照するためのコード（例：Assets.images.logo）を生成することに特化したツールです。これにより、文字列によるパス指定に起因するエラーや、タイプミスによる実行時エラーを防止します。
https://pub.dev/packages/build_runner / https://pub.dev/packages/flutter_gen_runner
envied / envied_generator
皆さんは実装する際に、環境変数を管理するために、.env ファイルを利用してますでしょうか。
その.env ファイルを、ただ読み込むだけでなく、より安全かつ効率的に利用できるようにするのが、enviedパッケージです。@Enviedアノテーションを付けたクラスを定義し、build_runnerを実行するだけで、.env の内容を元にした型安全な Dart クラスが自動で生成されます。
envid の強みは、生成されたキーが型安全であることに加え、obfuscate: trueオプションで難読化される点です。これにより、リバースエンジニアリングによるキーの抜き取りリスクを大幅に低減できます。
アプリ内に.env の変数を使用するためにenv.dartのサンプルコード
import "package:envied/envied.dart";
part 'env.g.dart';
@Envied(path: ".env")
abstract class Env {
@EnviedField(varName: "API_KEY_IOS", obfuscate: true)
static String apiKeyIos = _Env.apiKeyIos;
@EnviedField(varName: "API_KEY_ANDROID", obfuscate: true)
static String apiKeyAndroid = _Env.apiKeyAndroid;
}
https://pub.dev/packages/envied / https://pub.dev/packages/envied_generator
loading_animation_widget
API リクエストやアプリの処理を行いの際に、ユーザーに処理中であることを示すローディングアニメーションは、UX の向上に繋がります。loading_animation_widgetはいくつローディングアニメーションすでに入っていますので、こちらを導入するだけすぐお気に入りのローディングアニメーション使用できます。
https://pub.dev/packages/loading_animation_widget
flutter_flavorizr
開発する際に、状況に応じて Dev、Stg、Prod といった複数の環境を使い分けることはよくありますよね。
flutter_flavorizrを使用すると、pubspec.yamlに設定を記述し、flutter pub run flutter_flavorizrを実行するだけで、各環境用の設定が自動的に生成されるため、手動で設定する手間を省略できます。
＊flavoriz.yaml(flutter_flavoriz)の設定ファイルの例
flavors:
# 1. 開発（development）環境
dev:
app:
name: "マイアプリ Dev" # ホーム画面に表示されるアプリ名
android:
applicationId: "com.example.myapp.dev" # AndroidのユニークID
ios:
bundleId: "com.example.myapp.dev" # iOSのユニークID
# 2. ステージング（staging）環境
stg:
app:
name: "マイアプリ Stg"
android:
applicationId: "com.example.myapp.stg"
ios:
bundleId: "com.example.myapp.stg"
# 3. 本番（production）環境
prod:
app:
name: "マイアプリ" # 本番なのでサフィックスなし
android:
applicationId: "com.example.myapp" # 本番なのでサフィックスなし
ios:
bundleId: "com.example.myapp"
https://pub.dev/packages/flutter_flavorizr
まとめ
以上、私が普段から愛用しているFlutterのパッケージを紹介しました。皆さんがよく使うパッケージは含まれていましたでしょうか？
もし、この記事で紹介していないおすすめのパッケージがありましたら、ぜひコメント欄で共有してください！
▼ 採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。