[基礎知識]flutter_hooks/useState関数

flutter_hooks/useState関数

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

useState 関数は、
・ 状態の管理を行う
ために使用されます。

(定義)(定義)flutter_hooks/useState関数:
ValueNotifier<T> useState<T>(
  T initialData
)
(例)
class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);  //初期値として0を設定

この関数は、
・ 特定のデータ型 T ValueNotifier 作成

・ その管理
します

このValueNotifier
・ 更新されるたび
  その監視しているウィジェット再ビルドさせる
という役割を持っています。

動作の詳細

  1. 初期化
     最初呼び出し時initialData 指定されたValueNotifier 初期化します
  2. 値の更新
     ValueNotifier.value 更新されるとそれ使用監視)している HookWidget (ValueNotifierを参照しているウィジェット(この場合はHookWidget)が通知を受けて、自分自身)再ビルドする必要があるとマーク(システムが内部的にウィジェットを「再ビルドが必要」と識別するためのフラグを立てること)され(すぐにウィジェットは再ビルドされ)ます
  3. 後続の呼び出し
     最初の呼び出し以降、initialData は無視され、ValueNotifier の現在の値が維持されます。

使用例

以下の例では、カウンターアプリケーションを作成しています。
このウィジェットはタップするたびにカウンターの値を増やし、その値を表示します。

Dart
class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);  // 初期値として0を設定

    return GestureDetector(
      onTap: () => counter.value++,  // タップするたびにカウンターの値を増やす
      child: Text(counter.value.toString()),  // 現在のカウンターの値を表示
    );
  }
}

関連する機能

  1. ValueNotifier

     ValueNotifier は値の変更をリスナーに通知する Flutter のクラスです。
     useState はこの ValueNotifier 使用して状態変更管理します。
  2. useStreamController

     useState 代わり使用できる状態管理手法です。
     特定のケースで StreamController を用いることで、より詳細な制御や複数の値の非同期更新を扱うことができます。

実装

内部的には、useState 関数は _StateHook を使用して initialData を元に ValueNotifier を生成し、それを返します
これにより、ウィジェット内状態簡単管理し、動的UI構築を支援します。

参考ThirdPartyブログ

Zenn/hooks を活用する

コメントを残す