Pied de page Flutter GridView (pour indiquer le chargement avec défilement infini)

Question

J'ai un GridView qui fonctionne assez bien. J'utilise la grille dans le contexte d'un défilement infini où plus d'éléments sont chargés via une API REST lorsque le défilement est proche du bas. Aucun problème ici.

Cependant, je souhaite pouvoir afficher un indicateur de chargement en bas de la grille. Ce Widget doit couvrir toutes les colonnes de la grille mais doit toujours faire partie du contenu défilant.

Je suis novice en matière de Flutter et je ne sais pas comment y parvenir.

Mon GridView (fonctionnel) est instancié comme suit :

return new GridView.builder(
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _COLUMN_COUNT),
  controller: widget.scrollController,
  itemCount: widget.items.length,
  itemBuilder: (BuildContext context, int index) {
    return new _ItemView(item: widget.items[index]);
  },
);

Answer 1

Envelopper SliverGrid par CustomScrollView :

return new CustomScrollView(slivers: <Widget>[
  new SliverGrid(
    gridDelegate: yourGridDelegate,
    delegate: yourBuilderDelegate,
  ),
  new SliverToBoxAdapter(
    child: yourFooter,
  ),
]);

Answer 2

Je ne sais pas exactement de quelle manière vous construisez votre réseau, et je sais que c'est un peu différent de ce à quoi vous pensiez, mais il me semble que c'est un bon cas d'utilisation de CircularProgressIndicator .

Notez que dans mon cas, le chargement se poursuit parce que mon snapshot.hasData est toujours false . Chaque fois que vos données sont chargées, elles remplacent le fichier ProgressIndicator avec les données que vous avez l'intention d'injecter dans vos widgets.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("GridView Test"),
        ),
        body: new FutureBuilder(future: _getAsyncStuff(),
            builder: (BuildContext context,
                AsyncSnapshot<DataSnapshot> snapshot) {
              return new GridView.builder(
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemBuilder: (BuildContext context, int index) {
                    return new Card(child:
                    !snapshot.hasData ? new CircularProgressIndicator(
                      strokeWidth: 0.8,) : new Text("Snapshot data#$index")
                    );
                  });
            })

    );
  }
}