Jak zaktualizować stan widżetu z innego widżetu we Flutterze za pomocą klucza globalnego?

Question

Mam główny ekran widżetów zawierający dwa główne widżety Nagłówek (zaznaczony na czerwono) i listę (oznaczoną na fioletowo),

oto mój kod do tego:

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

Jak widzisz , widżet nagłówka ma trzy opcje Tous Bloquéi ayant Retardpróbuję osiągnąć wartość klikniętej opcji do widgetu listy oznaczonego kolorem fioletowym (ponieważ te opcje są filtrami i elementy listy powinny być wyświetlane w oparciu o wybrana opcja)
Trudno mi zrozumieć pakiety zarządzania stanem iz tego, co rozumiem, Global Keysmogę załatwić sprawę , ale jak? . oto mój kod widżetu nagłówka:

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

Proponuję obejrzeć 2 przykłady w tym filmie Pragmatic State Management in Flutter (Google I / O'19) o state mangement. Ten film bardzo mi pomógł, gdy na początku uczę się trzepotania. Wyjaśniają, jak sterować StatefulWidgetz drugiego:

1. Ustaw stan jako globalny, kontrolowany przez inny widżet ( od 5 min 30 s )
2. Użyj Provider, które jest bardzo popularnym rozwiązaniem we Flutterze, aby kontrolować udział wartości między 2 widżetami ( od 15m05s )

Masz więcej czasu, możesz studiować bardziej wymyślne metody zarządzania stanem, takie jak Bloc, MobX ( lista podejść do zarządzania stanem ) lub nawet zaawansowaną wersję Providernazwanego riverpod, która po prostu naciskała kilka miesięcy temu, które próbują rozwiązać niektóre wady podczas korzystania z Provider.