グローバルキーを使用してFlutterの別のウィジェットからウィジェットの状態を更新するにはどうすればよいですか？

Question

メインウィジェット画面に、ヘッダー（赤でマーク）とリスト（紫でマーク）の2つのメインウィジェットが含まれ

ています。これがそのためのコードです。

    class ScreenClient extends StatefulWidget {
      _ClientState createState() => _ClientState();
    }
    
    class _ClientState extends State<ScreenClient> {
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ClientHeader(), // this is my header widget red
            Expanded(
              child: ClientList(), // this is my list widget purple
            ),
          ],
        );
      }
    }

あなたが見ることができるように3つのオプションがあるウィジェットヘッダTous Bloquéおよびayant Retardそれらのオプションがフィルタされ、リストの要素がに基づいて示すべきであるので、私が達成しようとしている何が、ウィジェット（紫の付いたリストに、クリックされたオプションの値を渡しています選択したオプション）
状態管理パッケージを理解するのに苦労していて、理解しているGlobal Keysことからトリックを実行できますが、どうすればよいですか？。これが私のヘッダーウィジェットコードです：

class ClientHeader extends StatefulWidget {
  _HeaderClientState createState() => _HeaderClientState();
}

class _HeaderClientState extends State<ClientHeader> {
  String nomSituation;
  String option = "Tous";

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          GestureDetector(
            child: Text(
              "Tous",
              style: TextStyle(
                color: option == "Tous" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Tous";
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Bloqué",
              style: TextStyle(
                color: option == "Bloqué" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Bloqué";
                //add send value to ClientList widet ?
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Ayant Retard",
              style: TextStyle(
                color:
                    option == "Ayant Retard" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Ayant Retard";
              });
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

私は、あなたがこの動画で2例を見ることができます示唆フラッターで実用的な状態管理（GoogleのI / O'19）についてstate mangement。このビデオは、最初にフラッターを学ぶときに大いに役立ちました。彼らStatefulWidgetは他のものからを制御する方法を説明します：

1. 別のウィジェットによって制御され、状態をグローバルにします（5分30秒から）
2. ProviderFlutterで非常に人気のあるソリューションであるを使用して、2つのウィジェット間で値を共有するように制御します（15分05秒から）

時間がある場合は、Bloc、MobX（状態管理アプローチのリスト）、または数か月前にプッシュProviderされた名前付きリバーポッドの高度なバージョンでさえ、プロバイダーを使用するときにいくつかの短所を解決しようとする、より凝った状態管理方法を研究できます。