Wie aktualisiere ich einen Widget-Status von einem anderen Widget in Flutter mit dem globalen Schlüssel?

Question

Ich habe einen Haupt-Widget-Bildschirm, der zwei Haupt-Widgets enthält, einen Header (rot markiert) und eine Liste (lila markiert).

Hier ist mein Code dafür:

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

der Header - Widget hat drei Optionen , wie Sie sehen können Tous Bloquéund ayant Retard, was ich versuche , mit lila Widget markiert zu erreichen , ist der Wert der angeklickten Option auf der Liste übergeben (da diese Optionen Filter sind und die Listenelemente auf der gezeigten beruhen sollte , gewählte Option)
Es fällt mir schwer, Statusverwaltungspakete zu verstehen, und nach meinem Verständnis Global Keyskann ich den Trick machen, aber wie? . Hier ist mein 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";
              });
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

Ich schlage vor, Sie können 2 Beispiele in diesem Video Pragmatic State Management in Flutter (Google I / O'19) über sehen state mangement. Dieses Video hat mir sehr geholfen, als ich am Anfang das Flattern lernte. Sie erklären, wie man das StatefulWidgetvon dem anderen kontrolliert :

1. Status global machen, gesteuert von einem anderen Widget ( ab 5:30 Uhr )
2. Verwenden Sie Provider, eine in Flutter sehr beliebte Lösung, um die gemeinsame Nutzung des Werts zwischen zwei Widgets ( ab 15m05s ) zu steuern.

Wenn Sie mehr Zeit haben, können Sie ausgefallenere State-Management-Methoden wie Bloc, MobX ( Liste der State-Management-Ansätze ) oder sogar die vor einigen Monaten veröffentlichte Push- Version des Providerbenannten Riverpod studieren, die versuchen, einige Nachteile bei der Verwendung von Provider zu beheben.