StateFullBuilderを使用したアドホックステートフルウィジェット



フラッタとその宣言的パラダイムは非常に大きいです.UISを構築する宣言的な方法では、プロパティに「バインド」プロパティが必要です.
限り、あなたのプロパティの値を更新する限りsetState()StatefulWidget , 値は魔法のようにUIに反映されます.
しかし、あなたがあるとき、何が起こりますかWidget それはbuilder そして、あなたは状態がある何かを持っている必要がありますか?確かに、あなたはStatefulWidget を返します.builder . しかし、あなたが何か小さいものを造りたいならば、これはあまりに冗長であるかもしれません.
ここはどこです StatefulBuilder 遊びに出る.それはAを提供するウィジェットですStateSetter 身近なものを呼ぶことができるsetState() ウィジェットを「アドホック」から構築するときbuilder ).
例を挙げて説明しましょう.The showModalBottomSheet 画面の下部からポップアップするダイアログを表示するための便利な方法です.このメソッドはbuilder このダイアログの内容のウィジェットをビルドするパラメータです.

void openModal(
        BuildContext context, MyViewModel viewModel) => // 1.
    showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) => StatefulBuilder( // 2.
            builder: (BuildContext context, StateSetter setState) => // 3.
              TextButton(
                child: Text(viewModel.counter.toString()),
                onPressed: () => setState(() => viewModel.counter++)))); // 4.
  • Aを使う方法StatefulBuilder ここで述べたのは、その状態をbuilder (例えば、a )はビルダが毎回呼び出されるのでsetState() が呼ばれる.
  • The showModalBottomSheet() メソッドはbuilder モーダルの内容のパラメータ.ここで我々は我々を返す場所ですStatefullBuilder .
  • The StatefulBuilder 's builder 提供するStateSetter モーダルの内容を更新したい場合は、後で使用します.
  • onPressed 我々はちょうど我々のデータを更新しないでください.代わりに、我々は身近な中のデータを更新しますsetState() . The StatefulBuilder 's builder が呼び出され、モードの内容が更新されます.
  • うまくいけば、今ではどのようにステートフルウィジェットを返すには明確ですbuilder 新しいものを作らずにStatefulWidget しかし、StatefullBuilder .
    ハッピーコーディング!