[基礎知識]flutter_hooks/useValueChanged関数

flutter_hooks/useValueChanged関数

flutter_hooks/useValueChanged関数(詳細は、pub.dev 参照)についての説明です。

目次 index【閲覧時間3分】 click !!>>

1.useValueChanged の概要

特定の値の変化を検知して何らかの副作用(side effect)を実行するために使います。
値が変更されたときにのみ副作用を実行するためのフックです。

(定義)useValueChanged:
void useValueChanged<T, U>(
  T value,   //監視する値
  U Function() onChange  //value が前回ビルドから変更時に呼び出される関数
)

このフックは、渡された value の値が前のビルド時と比較して変更されたかを検出します。
もし値が変更されていたら、onChange 関数を実行します。
この関数からは任意の型 U の値を返すことができ、この戻り値は useValueChanged の戻り値として使用されます。

2.使用例

以下のコードでは、ユーザーが「Toggle Theme」ボタンを押すたびにテーマが切り替わり、useValueChanged がその変更を検出してコンソールにメッセージを出力します。

(main.dart)
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test05/widgets/usevaluechanged_hooks_example.dart';
void main() {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: ThemeChangeDetector(
          currentTheme: 'Dark',
        )
      )
    )
  );
}
(usevaluechanged_hooks_example.dart)
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ThemeChangeDetector extends HookWidget {
  final String currentTheme;

  const ThemeChangeDetector({super.key, required this.currentTheme});

  @override
  Widget build(BuildContext context) {
    final theme = useState(currentTheme);

    //テーマが変わったときに何らかの処理を行う
    useValueChanged<String, String>(theme.value, (oldValue, oldResult) {
      //テーマに基づいて何かデータをロードするなどの処理
      if (oldValue != theme.value) {
        if (kDebugMode) {
          print("現在のテーマ: ${theme.value}");
        }
      }
      return theme.value; //ここで何か値を返しても良い
    });

    return Scaffold(
      appBar: AppBar(title: const Text('useValueChanged 使用例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('現在のテーマ: ${theme.value}'),
            ElevatedButton(
              onPressed: () {
                //テーマの切替
                theme.value = theme.value == 'Dark' ? 'Light' : 'Dark'; 
              },
              child: const Text('テーマの切替ボタン'),
            ),
          ],
        ),
      ),
    );
  }
}
(DEBUG CONSOLE)起動時:
Restarted application in 336ms.
(DEBUG CONSOLE)テーマ切替直後:
Restarted application in 336ms.
flutter: 現在のテーマ: Light
Dart
Restarted application in 336ms.
flutter: 現在のテーマ: Light
flutter: 現在のテーマ: Dark

3.つまり

useValueChanged は特に、状態プロパティ変更に基づいて副作用トリガーする必要がある場合に便利です。
また、このフックを使用することで、変化効率的し、不要再計算副作用実行避けることができます。

コメントを残す