Flutter入門

【5分でわかる】Flutter Hooksの使い方とRiverpodと使い分け | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、Flutter Hooksの使い方とRiverpodと使い分けについて解説する記事です。

想定読者

Flutter Hooksについて学びたい方

今回のソースコードは以下で公開されています。

https://github.com/kimuson/flutter_hooks_demo

Flutter Hooksとは?

Flutter HooksはUIの状態管理をサポートするライブラリです。

state情報へのアクセスが非常にしやすくまた、アクセスする際にさまざまなメソッドが良いされているため状況に合わせ柔軟な開発を実現することができます。

Flutter Hooksを使ってみる

まずはFlutterのデフォルトアプリであるカウンターアプリをFlutter Hooksにリプレイスして使用感を掴んでいきましょう。

Flutter Hooksを導入する

例の如くpubspec.yamlにhooks_riverpodとflutter_hooksそして、state_notifierを導入します。

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.2+1

Hooksを実装する

以下のコードを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」を使ってステート情報を定義しました。

このほかにもステート情報を定義する方法は複数存在しますので簡単にご紹介します。

メソッド用途
useContextBuildContextを取得できる。Widget間の受け渡しがしやすくなる。
useEffect起動時一度のみ実行したい場合、開放処理に使用する。
useMemoized値をキャッシュ管理してくれる。APIの結果を保存する際に使用。
useFuture非同期処理を行う際に使用、Futureオブジェクトを扱う場合に使用
useStream非同期処理を行う際に使用、Streamオブジェクトを扱う場合に使用
参考元:Flutter HooksのuseXXXの使い方

Flutter Hooksの使い所

個人的には一つのウィジェット内でステート情報を動的に変更したい場合に使用するのがメインになるかと思います。

非推奨であるstateful widgetを使用しないための一つの手段として非常に有効であると考えています。

Riverpodとの使い分け

状態管理のライブラリで有名なもので「Riverpod」があります。

こちらのライブラリも非推奨であるstateful widgetを使用しないため手段として非常に有効です。

今回の記事ではFlutter Hooksを使うことに注目したので詳細な説明は割愛しますが、以下の記事でRiverpodの基本的な使い方をわかりやすくまとめていますのでご参考ください。

さて、では具体的にどのようにRiverpodとFlutter hooksを使い分けるかというと、グローバルにステート情報を管理したい場合はRiverpod、一つのwidgetでステート情報が完結する場合はFlutter Hooksが個人的には良いかと思っています。

ここの使い分けは現状何か答えがあるわけでなく、またライブライ自体も発展途上にあるため、随時変更内容をチェックしてベストプラクティスを検討してみると良いと思います。

まとめ:Flutter Hooksでステートレスな開発を

stateful widgetを使用することはなるべく避けることを公式で推奨しているため、その手段としてFlutter Hooksを導入することは大変おすすめです。

ソースコードもシンプルで学習しやすいかと思いました。この機会にぜひ習得してみてください。

今回のソースコードは以下で公開されています。

https://github.com/kimuson/riverpod_demo

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する