Comment mettre à jour un état de widget à partir d'un autre widget dans Flutter à l'aide de la clé globale?

Question

J'ai un écran de widget principal contenant deux widgets principaux un en-tête (marqué en rouge) et une liste (marquée en violet)

voici mon code pour cela:

    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
            ),
          ],
        );
      }
    }

le widget d'en-tête a trois options comme vous pouvez le voir Tous Bloquéet ayant Retard, ce que j'essaie de faire est de transmettre la valeur de l'option cliquée au widget de liste marqué en violet (car ces options sont des filtres et les éléments de la liste doivent être affichés en fonction du option choisie)
J'ai du mal à comprendre les packages de gestion d'état et d'après ce que je comprends, je Global Keyspeux faire l'affaire, mais comment? . voici mon code de widget d'en-tête:

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

Je vous suggère de regarder 2 exemples dans cette vidéo Pragmatic State Management in Flutter (Google I / O'19) sur state mangement. Cette vidéo m'a beaucoup aidé lorsque j'apprends le flottement au début. Ils expliquent comment contrôler le StatefulWidgetde l'autre:

1. Rendre l'état global, contrôlé par un autre widget (à partir de 5m30s )
2. Utilisation Provider, qui est une solution très populaire dans Flutter, pour contrôler le partage de la valeur entre 2 widgets (à partir de 15m05s )

Vous avez plus de temps, vous pouvez étudier des méthodes de gestion d'état plus sophistiquées comme Bloc, MobX ( Liste des approches de gestion d'état ) ou même la version avancée de RiverpodProvider nommé il y a quelques mois, qui tentent de résoudre certains inconvénients lors de l'utilisation de Provider.