0

Tengo un widget que retorna un gridview y se le pasa por parametros una funcion que es donde el builder del gridview va a buscar mas elementos cuando los necesite para dibujar. Mi problema es que cuando modifico los parametros de la funcion que le paso a ProductGridWidget en su widget padre y ejecuto un setState() el hijo que recibe la funcion donde va a buscar en un webservice mas productos se redibuja, pero como como la primer vez que se dibujo ya cargo 20 elementos, si no doy abajo con el scroll que llegue dentro del grid a in index mayor que 20 aun no llamo a la funcion que actualice en el padre, o sea estoy viendo periodico viejo, neceisto alguna forma de resetear totalmente mi ProductGridWidget que quede totalmente nuevo.

class ProductGridWidget

 extends StatefulWidget {
  final int crossAxisCount;
  final Function fetchFunction;

  ProductGridWidget(
      {@required Function fetchFunction, int crossAxisCount = 2, Key key})
      : fetchFunction = fetchFunction,
        crossAxisCount = crossAxisCount,
        super(key: key);

  @override
  State<StatefulWidget> createState() => _ProductGridWidget();
}

En este ejemplo lo que hago es movel el index del gridview al top, con un scrollController y entonces limpio la lista de elementos cargados, para obligarlo a rellamar la funcion para cargar los 20 primeros de nuevo.

class _ProductGridWidget extends State<ProductGridWidget> {
  List<Completer<Product>> productCompleters = List<Completer<Product>>();
  ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController();
    fun = widget.fetchFunction;   
    super.initState();
  }

@override
  Widget build(BuildContext context) {    
  return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: widget.crossAxisCount),
      itemBuilder:  (BuildContext context, int index) => _buildProductGridTileWidget(index),
    )
  }

Widget _buildProductWidget(int itemIndex) { 
    --metodo que se encarga de dibujar el widget para cada index--
  }

  _completeProducts(int itemIndex) async {
    try {
      --metodo que se ecarga de buscar nuevos productos al api--
    } catch (error) {
     
    }
  }

7
  • con scrollcontroller te funciona? si es así, porque quieres usar otra forma? Commented el 2 ago. 2020 a las 21:39
  • quisiera saber si existe una mejor forma de hacerlo
    – Eddy
    Commented el 2 ago. 2020 a las 22:03
  • Ya que el que actualiza ese widget es el padre, si estas en un State del stateful deberías sobreescribir el didUpdatedWidget y mover ese lógica ahí, para q no esté dentro del método build. Otra forma es sacando del arbol de widgets el GridView, y volver a agregarlo, otra también es un usando un Key diferente para el GridView , para cada vez q se refresca, pero son menos óptimas. La que estás usando me parece la correcta Commented el 2 ago. 2020 a las 22:05
  • diego edite la pregunta para mas detalles, pero de lo que me comenta arriba la opcion de sacar el grid del arbol y volver a agregarlo me parece la mas interesante, puede darme detalles, digame si entiende en si el problema con la edicion q le hice a la pregunta!!!
    – Eddy
    Commented el 2 ago. 2020 a las 22:18
  • hmm no logro entender que es lo que quieres hacer, y que es lo que no está funcionando, yo asumo q cada vez que tu actualizas el widget padre con nuevos elementos, este refresca el hijo, y lo unico que necesitas es mover el scroll a la posición inicial 0, para ver los más recientes, es eso? Commented el 2 ago. 2020 a las 22:24

1 respuesta 1

1

Ok, la alternativas que tienes son sacar del widget tree al GridView o generar un nuevo key para que Flutter vuelva a crear el widget, esto último lo puedes hacer simplemente agregando el atributo key.


    return GridView.builder(
      key: Key('mi_nuevo_key'),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder:  (BuildContext context, int index) => _buildProductWidget(index),
    );

OJO: que cada key debe ser diferente para que vuelva a recrearlo, para probar intenta ponerle la hora ahí.


key: Key(DateTime.now().millisecondsSinceEpoch.toString())

UPDATE

Si deseas sacarlo del árbol de widget necesitarás agregar unas validaciones extras:

Primero declara una variable bool en el state.

bool completed = true;

sobreescribe el método didUpdateWidget del State con lo siguiente.



  @override
  void didUpdateWidget(YourStatefulWidget oldWidget) {
    completed = false;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        completed = true;
      });
    });
    super.didUpdateWidget(oldWidget);
  }

Y al momento de pintar el GridView agregas la validación:

completed ? GridView(...) : const SizedBox() ,

Con eso estarás removiendo del árbol de widget cada vez que hay un update del parent.

9
  • y la variante de sacarlo del arbol de widgets como seria?? quisiera probar esa, pq la de generar un nuevo key por cada uno una vez lo redibuje me quedan dudas q pasa con los anteriores que ya genere
    – Eddy
    Commented el 2 ago. 2020 a las 23:34
  • ya actualicé mi respuesta Commented el 2 ago. 2020 a las 23:40
  • lo probe, y no me funciona como necesito, de hecho no creo q lo este desmontando del arbol y volviendolo a poner, si se ejecuta el didUpdateWidget() cuando ejecuto el setState en el padre eso lo verifique pero la lista de elemtos cargados siegue siendo la misma, y widget SnakeButton que recibe me dice que no sabe q es, que pudiera estar pasando?
    – Eddy
    Commented el 3 ago. 2020 a las 0:17
  • ya actualicé , en realidad ese SnakeButton debería ser el nombre de tu statefulwidget, que error te sale? Commented el 3 ago. 2020 a las 0:22
  • na que no sabia que era el SnakeButton, lo subtitui por ProductGridWidget, el esta funcionando bien, pero la lista de elementos ya cargados son la que no cambia, pero le puse en el setSate dentro de didUpdateWidget: "productCompleters = [];" y funciona perfecto, pero no se supone que si lo estuviera quitando y volviendo a poner todo eso comience de 0??
    – Eddy
    Commented el 3 ago. 2020 a las 0:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.