Flutter のパッケージである、hooks_riverpod を利用し、フックとプロバイダで状態管理します。

基本コードは前回作成した、タップすると値が 2 倍になるアプリを使用します。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends HookWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    final counter = useState(1);

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'タップした回数が表示されます:',
            ),
            Text(
              counter.value.toString(),
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
            ElevatedButton(
              onPressed: () => counter.value *= 2,
              child: Text("タップ"),
            )
          ],
        ),
      ),
    );
  }
}

image2

まずは、hooks_riverpod をインストールします。

ターミナルで、flutter pub add hooks_riverpodを実行します。

さらにターミナルで、flutter pub get を実行しましょう。

main()runAppProviderScopeを設定します。

void main() {
  runApp(ProviderScope(child: const MyApp()));
}

HookConsumerWidgetHookConsumerWidgetへ変更します。

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

Widget buildrefを追加します。

@override
 Widget build(BuildContext context, WidgetRef ref) {

文章を Riverpod で状態管理するために、message.dart を作成します。

hooks_riverpod.dart をインポートします。

import 'package:hooks_riverpod/hooks_riverpod.dart';

river_podProviderを使用し、文章を指定します。

final messageProvider = Provider<String>((ref) => 'タップしてみてください:');

main.dart に戻り、ref.watchで先程作成したmessageProviderを指定します。

@override
Widget build(BuildContext context, WidgetRef ref) {
  final counter = useState(1);

  final String _message = ref.watch(messageProvider);

Textに、先程作成した_messageを指定します。

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text(_message),

一通り完成したので、動作確認します。

image3

Riverpod で指定した文章が表示されました。

タップボタンをタップしてみると、

image4

タップするたび、値が 2 倍になりました。

ブログ一覧