ども、木村です。個人開発でアプリ開発をしています。
本記事は、Flutter Hooksの使い方とRiverpodと使い分けについて解説する記事です。
Flutter Hooksについて学びたい方
今回のソースコードは以下で公開されています。
Flutter Hooksとは？
Flutter Hooksは、Flutterアプリケーションにおける状態管理を簡単にするライブラリです。これを使用することで、開発者はUIの状態情報に簡単にアクセスし、管理することが可能になります。
従来の状態管理方法に比べて、より少ないコードで直感的に状態を扱えるため、開発の効率が大きく向上します。
さまざまなフック（hook）を利用することで、アプリケーションのライフサイクルイベントを簡単に扱えたり、状態の変更が必要な時に柔軟に対応できるようになります。
Flutter Hooksを使ってみる
まずはFlutterのデフォルトアプリであるカウンターアプリをFlutter Hooksにリプレイスして使用感を掴んでいきましょう。
Flutter Hooksを導入する
例の如くpubspec.yamlにhooks_riverpodとflutter_hooksそして、state_notifierを導入します。
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.2+1Hooksを実装する
以下のコードをmain.dartに記載してください。
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends HookWidget {
@override
Widget build(BuildContext context) {
final counter = useState(0);
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
counter.value.toString(),
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
counter.value++;
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
重要なポイント
import 'package:flutter_hooks/flutter_hooks.dart';flutter_hooksをインポートしています。
final counter = useState(0);ステート管理したい変数を定義します。（）の中には初期値を設定しています。
counter.value.toString(),ステート情報を参照するときは「.value」アクセスできます。
各種Hooks機能について
上記の例では「useState」を使ってステート情報を定義しました。
このほかにもステート情報を定義する方法は複数存在しますので簡単にご紹介します。
| メソッド | 用途 |
|---|---|
| useContext | BuildContextを取得できる。Widget間の受け渡しがしやすくなる。 |
| useEffect | 起動時一度のみ実行したい場合、開放処理に使用する。 |
| useMemoized | 値をキャッシュ管理してくれる。APIの結果を保存する際に使用。 |
| useFuture | 非同期処理を行う際に使用、Futureオブジェクトを扱う場合に使用 |
| useStream | 非同期処理を行う際に使用、Streamオブジェクトを扱う場合に使用 |
Flutter Hooksの使い所
個人的には一つのウィジェット内でステート情報を動的に変更したい場合に使用するのがメインになるかと思います。
- 状態管理の簡素化: 複雑な状態管理をHooksを使うことで簡単にできます。
- ライフサイクルイベントの扱いやすさ: コンポーネントのマウントやアンマウント時の処理を簡単に実装できます。
- 再利用可能なロジック: カスタムHookを作成し、アプリケーション内でロジックを簡単に再利用できます。
- 効率的なレンダリング: 必要な時だけコンポーネントが再レンダリングされるように管理できます。
- コードの可読性の向上: 状態やライフサイクルのロジックを分離することで、コードの可読性が向上します。
非推奨であるstateful widgetを使用しないための一つの手段として非常に有効であると考えています。
Riverpodとの使い分け
状態管理のライブラリで有名なもので「Riverpod」があります。
こちらのライブラリも非推奨であるstateful widgetを使用しないため手段として非常に有効です。
今回の記事ではFlutter Hooksを使うことに注目したので詳細な説明は割愛しますが、以下の記事でRiverpodの基本的な使い方をわかりやすくまとめていますのでご参考ください。
さて、では具体的にどのようにRiverpodとFlutter hooksを使い分けるかというと、グローバルにステート情報を管理したい場合はRiverpod、一つのwidgetでステート情報が完結する場合はFlutter Hooksが個人的には良いかと思っています。
以下のような観点を参考にしてみてください。
- 状態管理のスコープ: Riverpodはアプリ全体の状態管理に適しており、Flutter Hooksはローカルなウィジェットレベルでの状態管理に向いています。
- データフロー: Riverpodは依存関係を明確にし、アプリケーション全体でのデータフローを管理しやすくするのに対し、Hooksはコンポーネント内のデータフローを簡素化します。
- 再利用性: カスタムHooksを作成して特定の機能を再利用しやすくする一方で、Riverpodは状態やロジックの再利用をよりグローバルなレベルで実現します。
- テストの容易さ: Riverpodは状態管理のテストがしやすい構造を提供しますが、Hooksはウィジェット内の特定のロジックを分離してテストしやすくします。
- 使用場面: 複雑な状態や多くの依存関係がある大規模なアプリではRiverpod、小規模で状態管理がシンプルなアプリや特定のUI部品ではFlutter Hooksが適しています。
まとめ:Flutter Hooksでステートレスな開発を
stateful widgetを使用することはなるべく避けることを公式で推奨しているため、その手段としてFlutter Hooksを導入することは大変おすすめです。
ソースコードもシンプルで学習しやすいかと思いました。この機会にぜひ習得してみてください。
最新のFlutterの勉強方法 まとめ
Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。
