¿Cómo actualizar el estado de un widget desde otro widget en Flutter usando la clave global?

Nov 28 2020

Tengo una pantalla principal de widgets que contiene dos widgets principales, un encabezado (marcado con rojo) y una lista (marcada con morado)


aquí está mi código para eso:

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

el widget de encabezado tiene tres opciones como puede ver Tous Bloquéy ayant Retard, lo que estoy tratando de lograr es pasar el valor de la opción en la que se hizo clic al widget de lista marcado con púrpura (porque esas opciones son filtros y los elementos de la lista deben mostrarse en función de la opción elegida)
Me cuesta entender los paquetes de gestión del estado y, por lo que tengo entendido, Global Keyspuedo solucionarlo, pero ¿cómo? . aquí está mi código de widget de encabezado:

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

Respuestas

1 yellowgray Nov 29 2020 at 06:06

Le sugiero que pueda ver 2 ejemplos en este video Pragmatic State Management in Flutter (Google I / O'19) sobre state mangement. Este video me ayudó mucho cuando aprendí a aletear al principio. Explican cómo controlar el StatefulWidgetdel otro:

  1. Hacer que el estado sea global, controlado por otro widget ( desde 5m30s )
  2. Use Provider, que es una solución muy popular en Flutter, para controlar compartir el valor entre 2 widgets ( desde 15m05s )

Tiene más tiempo, puede estudiar un método de administración de estado más sofisticado como Bloc, MobX ( Lista de enfoques de administración de estado ) o incluso la versión avanzada de riverpod conProvider nombre hace unos meses, que intenta resolver algunas desventajas al usar Provider.