How to update a widget state from another widget in Flutter using global Key?

问题

I have a main widget screen contain two main widgets a Header (marked with red) and a list (marked with purple)
here is my code for that :

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

the header widget has three options as you can see Tous Bloqué and ayant Retard , what I'm trying to achieve is pass the value of the clicked option to the list widget marked with purple (because those options are filters and the list elements should be shown based on the chosen option)
I have a hard time understanding state management packages and from what I understand Global Keys can do the trick but How ? . here is my header widget code :

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

回答1:

I suggest you can watch 2 examples in this video Pragmatic State Management in Flutter (Google I/O'19)about state mangement. This video helped me a lot when I learn flutter in the begining. They explain how to control the StatefulWidget from the other one:

Make state global, controlled by another widget (from 5m30s)
Use Provider, which is a very popular solution in Flutter, to control share the value between 2 widgets (from 15m05s)

You you have more time, you can study more fancy state management method like Bloc, MobX (List of state management approaches) or even the advance version of Provider named riverpod just pushish few months ago, which try to resolve some cons when using Provider.

来源：https://stackoverflow.com/questions/65054185/how-to-update-a-widget-state-from-another-widget-in-flutter-using-global-key

标签

Flutter

dart

flutter-layout