flutter_hooks/useValueChanged関数
flutter_hooks/useValueChanged関数(詳細は、pub.dev 参照)についての説明です。
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 は特に、状態やプロパティの変更に基づいて副作用をトリガーする必要がある場合に便利です。
また、このフックを使用することで、値の変化を効率的に検出し、不要な再計算や副作用の実行を避けることができます。