はじめに
私は未経験エンジニアとして現場に入ってからもうすぐ１０ヶ月が経とうとしています。
実務を通して様々なパッケージに触れる機会がありました。
今回はそんな私の経験を通してこれは有用だなと感じた、あるいはFlutterエンジニアとして学習すべきと感じたパッケージを紹介していこうと思います。
なお、私の独断と偏見で各パッケージをグルーピングしてご紹介しています。
記事の対象者
- 実務未経験でこれからスキルを身につけたい方
- Flutterにはそこそこ慣れてきたけど、さらに重要なスキルを身に付けたい方
- 実務には入っているけど、色々なパッケージを知りたいと考えている方
1. UI編
1-1. gap
gapはColumnやRawの中で指定したピクセル数の空白を挿入できます。
とても単純な内容ですが、SizedBoxよりもわずかにではありますが、簡潔に記述できます。
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
アプリを起動した時に表示されるスプラッシュ画面を簡単に実装できるパッケージです。
基本的な設定をyamlファイルに書くのと、画像を用意しなければいけませんが、コツさえ掴めば簡単に導入できます。
以下は私が参考にさせて頂いた方の記事です。
1-3. carousel_slider
その名の通りカルーセルを簡単に実装することができるパッケージです。
私は最初に自力で実装しようとしてみたのですが、思いの外手間がかかりました。
しかし、このパッケージを使えば簡単に導入することができます。
いいねも脅威の5.6kと、安定感抜群のパッケージです。
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
flutterにはListView形式の並び替えができるWidgetとしてReorderableListViewが標準で用意されています。
しかし、GridView形式では用意さていません。そこで登場するのがこのパッケージです。
並び替えに対応させたいGridViewをラップする形で使えるので、扱いやすいです。
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
インターネットからダウンロードしてきた画像を表示し、データをキャッシュに保存する仕組みを提供するパッケージです。
毎回ダウンロードしてしまうとその分ユーザーの通信量の負担になってしまいます。そこで一度ダウンロードしてきたデータであればローカルのキャッシュデータを使用する、ということをしてくれます。
こちらも6.4kいいねを獲得している定番パッケージです。
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
1-6. shimmer
画像をローディングしている時によく出てくるキラキラしたローディング表現を簡単に実装できるパッケージです。
ちょっと言葉で表現するのが難しい😓ですので公式にデモが貼ってあるのでご確認ください。
こちらも5kいいねをもらう定番パッケージです。
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
様々なサイズのデバイスにおいて、UIの出し分けたりすることを簡単にしてくれるパッケージです。
各デバイスのブレークポイントを設定し、各画面でブレークポイント毎のUIであったり設定を簡単に呼び出せます。
私はタブレット対応でお世話になりました。
こちらも3kいいねを獲得している安定パッケージです。
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
アプリアイコンをデバイスまたはOSごとに簡単に作成してくれるツールです。
アイコン画像の用意と設定ファイルをyamlで簡単に書けば、
あとはコマンドを叩くだけで簡単に生成することができます。
2. 機能編
いわゆるデバイスやOSに備わっている機能を呼び出したり、なんらかの付加機能を提供したりするパッケージです。
2-1. screen_protector
アプリを展開している場合にスクリーンショットや画面録画を禁止にするパッケージです。
用途は限られますが、例えば有料コンテンツでSNSなどに掲載させたくない、などの場合に有効です。
以前書いた記事がありますので、詳細はそちらで確認してみてください。
2-2. share_plus
SNSでよく出てくる、「この内容をXxxを使って共有」を簡単に実装できるパッケージです。
とても簡単に実装できます。
こちらも3kオーバーの安定パッケージです。
await Share.share(
text,
subject: subject,
sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size,
);
以下の記事を参考にさせていただきました。
テストする時はちょっと工夫が必要です。その場合は以下を参考にすると良いと考えます。
2-3. local_auth
生体認証を簡単に実装できるflutterが用意しているパッケージです。
近年ではiOS18またはAndroid15などOS側でアプリをロックしたり非表示にしたりする機能が搭載されています。
しかし、アプリの中の特定の画面やコンテンツに生体認証のロックをかける需要もまだあります。
そんな時にはこのパッケージの出番です。
記事はまだ書けていないのですが、お試しで作ったものがありますのでよろしければ参考にしてみてください。
設定方法など基本的なことは以下を参考にさせていただきました。
3. ルーティング編
3-1. go_router
画面遷移をより便利に管理することができるパッケージです。
4.9kいいねがついていることからもわかる通り、様々なプロジェクトで使用されていると考えられます。
学習コストは高いほうだと考えられますが、学んで損のないパッケージです。
入門的な内容は以下の動画で学習しました。
#11 Flutter入門講座 go_router編
ルビーDog
3-2. go_router_builder
上記で述べたgo_routerを拡張するパッケージです。
このパッケージを使うとgo_routerでは成し得なかった型安全に値渡しを行えるようになったり、NavigationBarをShellRouteまたはStatefulShellRouteで実装することができます。
このパッケージも学習難易度が高いですが、一度理解できれば高度な画面遷移管理ができるようになります。
以下の記事で私は学習しました。
また現場で学んだ知識をもとに書いた記事でも触れているので、興味のある方は見てみてください。
4. データ永続化
4-1. sheard_preferences
データの永続化、基本中の基本であるパッケージです。
キーとバリューの組み合わせでローカルデータベースに保存する仕組みを提供します。
アプリの設定などの基本情報を保存する場合によく使用するため、マストで学ぶべきパッケージだと考えます。
いいねも9.8kでその圧倒的人気と安定感が伺えます。
// 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
私の記事ではちょっとアレンジして使っていますが、お時間がある方は読んでみてください。
4-2. flutter_secure_storage
iOSではKeychain、AndroidではKeyStoreを使ってデータを保存してくれるパッケージです。
先に述べたshared_preferencesと違うのはデータをセキュアに保存する目的で使用する点です。
具体的にはパスワード、ログイン後に取得したアクセストークンなど外部に漏れてはいけないデータを保存する用途です。
昨今ではアプリを使用するためにサービスのアカウントにログインすることはほぼ必須のため、こちらも学ぶべきパッケージの一つです。
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と違って若干取り扱いに注意が必要です。
以下の記事が参考になったのでおすすめです。
4-3. isar
複雑な情報を扱うことに長けたデータベースのパッケージの一つです。
ローカルデータベースでは現状定番のものがFlutterにはない印象ですが、
私が現場で扱ったこのisarはなかなか機能が豊富で高速なデータベースだと思います。
学習コストは高いですが、使いこなせればデータの扱いには困らないでしょう。
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
});
公式のドキュメントも丁寧に描かれているので、学習はしやすいでしょう。
私もいくつか記事を書いていますので、参考にしてみてください。
5. 状態管理
5-1. riverpod
公式サイト
Flutterでアプリ開発を行うなら必須といっても過言ではないパッケージです。
開発者のRemi Rousseletさんによるパッケージの説明によると リアクティブキャッシュとデータバインディングフレームワーク とのこと。
平たく言えばアプリで使用する状態をグローバルな値として宣言し、どこからアクセスしても同じ状態を取得できるようにすることができるものです。
さらにアーキテクチャ関連でよく聞かれる依存性の注入（DI）などにも用いられます。
学習コストは高いですが、Flutterエンジニアを目指すのなら必須項目だと思います。
さらにriverpodにはver1系、２系とありそのバージョンによって内容が異なります。
ざっくりいうと、非推奨になったメソッドが多くあったり自動生成を主体にしたコードへ変わっていたりします。
その点、昔の記事を見て最近の記事を見ると混乱するので注意が必要です。
以下は私が学習する上で参考にした動画、書籍、記事です。全体像を掴むには以下の動画のシリーズがおすすめです。
Riverpod(リバーポッド)完全ガイド #Flutter 1/4
ルビーDog
慣れてきたら書籍での学習をしてみましょう。
こちらの記事はAsyncValueについて解説されてますのでおすすめです。
私もいくつか記事を書いてますので、参考にしてみてください。
5-2. flutter_hooks
エフェメラルステート（またはローカルな状態）を扱いやすくするパッケージです。
riverpodはグローバルな状態管理やDIなどについてを扱うパッケージでしたが、こちらはより狭い範囲での状態管理に適しています。
ちなみにこのパッケージもriverpodの開発者であるRemi Rousseletさんが手がけたものです。
Flutterには標準でStatefulWidgetが用意されていますが、書き方が冗長です。
flutter_hooksでは簡潔に書くことができます。
また、ライフサイクルに関連する処理やテキストコントローラー関連なども簡素に書くことができます（他にもたくさんの便利機能がある）。
こちらはプロジェクトによってはStatefulWidgetを使っているかもしれませんが、私はこちらの方が書き方もシンプルで良いと感じています。
以下はおすすめの動画です。
Hooks(フック)要点解説 #Flutter
ルビーDog
関連する記事を私も書いてますので宜しければご覧ください。
※ この記事の 3. 値を引数で渡したり、useStateでの管理を検討する で少し触れてます。
6. ロジック&便利編
6-1. freezed
モデルを作成した際に高頻度で定義することになる以下のコードを自動生成してくれる便利ツールです。
- コンストラクタとプロパティ定義
- オーバーライドtoString、operator ==hashCode
- jsonへの変換メソッド
- copyWithオブジェクトを複製するメソッド
- シリアル化（デシリアライゼーション）を処理
これらを実装しようとすると数百行の記述が必要ですが、それを大幅に低減出来ます。
ちょっと便利さの伝わりづらい内容ですが、開発を続けていくとそのありがたみがわかってきます。
できるだけ初期段階で慣れておくと良いと考えます。
#17 Flutter入門講座 freezed編
ルビーDog
6-2. envied
コード上に定義する機密情報へ難読化の処理をかけて、解析しづらくするパッケージです。
主な用途はAPIキーなどです。
こちらも用途は限定的ですが、実務では必須の知識なので覚えておきましょう。
以下はおすすめの動画＆記事です。
#27 Flutter入門講座 envied編
ルビーDog
7. インターネット通信編
7-1. dio
APIでのやりとりを行うのに使用するHTTPクライアントパッケージです。
特定のサービスにアクセスして情報を取得したり、送信したりする際に使用します。
個人開発では便利なFirebase StoreやFirebase Storageですが、企業は基本的に自前のサーバーを持っており、そこに対してAPIによるやり取りを行なっています。
無料のAPIを提供しているサービスなどもあるので、早い段階で扱いに慣れておくと良いと考えます。
以下は私が参考にした記事です。
7-2. flutter_appauth
OAuth2.0を使用しての認証と認可を簡単に行えるようにするパッケージです。
企業側が用意したログインのフローをこのパッケージを使って実装することができます。
アカウント機能としてはFirebase Authenticationが有名ですが、企業によっては独自のAPIを用意していることも多いにあるので、このパッケージを通してOAuth2.0を勉強しておくのも良いと考えます。
以下の記事で触れていますので参考にしてみて下さい。
7-3. url_launcher
アプリ内からアプリ内ブラウザ、または外部ブラウザを開いて特定のウェブサイトを開くことができるパッケージです。
外部のサイト例えばヘルプページやホームページなどに遷移させることはよくあるため、よく使うパッケージだと思われます。
以下の記事で紹介しているので参考にしてみて下さい。
記事内でも紹介していますが、アプリ経由でのブラウザ展開についての詳細は以下の記事が大変参考になります。
8. 開発サポート編
8-1. logger
開発時におけるデバックコンソールに出すログをカスタマイズするパッケージです。
主な利点は2つあると考えおります。
一つ目は通常のprint文よりも見た目がわかりやすくなる点です。
二つ目はセキュリティーの問題です。通常のprintだとリリース版に入ってしまい、不要なコードであると同時にセキュリティー的にもよくありません。
使い方も非常に簡単ですので、ぜひ使ってみて下さい。
8-2. mockito
アプリ開発におけるテストコードの作成を補助してくれるパッケージです。
具体的には特定の機能をモックしたい場合に使用します。
使用用途は限定的、かつ難しい内容でもありますがテストを書くなら必須の内容です。
以下の記事でも紹介していますので、参考にしてみて下さい。
8-3. derry
こちらは普段よく使うshellのコマンドをスクリプトとして簡単に呼び出せるようにするパッケージです。
使用用途は限定的ですが、例えばbuild_runnerを走らせる以下のようなコマンド
flutter pub run build_runner build --delete-conflicting-outputs
これをderry brとかderry build_runなどの好きなコマンドとして登録することができます。
以下の記事で紹介していますので、参考にしてみて下さい。
記事内では 2. derryを使って効率よく出力する にて解説しています。
終わりに
未経験から始めた私が10ヶ月間の実務を通じて触れたパッケージの中から、特に有用だと感じたものを紹介しました。
これらのパッケージは、開発を効率化し、より良いプロダクトを作るための重要なツールです。
それぞれのパッケージを活用することで、Flutterエンジニアとしてのスキルを一段と高めることができると確信しています。
特に未経験や実務経験の浅い方々にとっては、どのパッケージを優先的に学ぶべきか迷うこともあるかと思いますが、まずはこの記事で紹介したものを手に取ってみてください。
最後に、この記事が皆さんのスキル向上の一助となり、Flutter開発がさらに楽しいものになることを願っています。