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

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

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

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

GitHub - kimuson/flutter_hooks_demo

Contribute to kimuson/flutter_hooks_demo development by creating an account on GitHub.

2022年 Flutterの学習方法(学習サイト5選) ども、木村です。本業はデータサイエンティスト。副業でアプリ開発をしています。 本記事では、効率的なFlutterの学習方法につい...

2022年 Flutterの入門学習におすすめのUdemy教材 7選 ども木村です。本業ではデータサイエンティスト、副業でアプリ開発をしています。 本記事では、Flutterの入門学習におすすめのU...

【厳選】Flutterに入門できる書籍 3選 ども、木村です。本業ではデータサイエンティスト。副業で個人でアプリ開発をしています。 いまやクロスプラットフォームの主力となりつ...

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

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

Flutter Hooksの使い所

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

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

Riverpodとの使い分け

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

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

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

【5分でわかる】RiverpodとProviderをわかりやすく解説 | Flutter入門 ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。 本記事は、Riverpodの使い方と各種Prov...

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

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

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

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

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

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

GitHub - kimuson/riverpod_demo

Contribute to kimuson/riverpod_demo development by creating an account on GitHub.