0
votes

Comment afficher une fileuse de chargement tout en obtenant des données de Firestore

Je suis nouveau pour flotter. Voici mon code pour obtenir des données d'une collection Firestore appelée Postes.Le problème lorsque la première application Times chargée il faut quelques secondes pour charger des données jusqu'à ce qu'il affiche un écran vide. Il ne se produit que de la première fois. Comment afficher le chargement. Spinner ou quelque chose à l'utilisateur jusqu'à ce que les données soient chargées? (Pas que ce ne soit pas le code entier)

class ForumHome extends StatefulWidget {
  @override
  _ForumHomeState createState() => _ForumHomeState();
}

dbMethods dbcrud = new dbMethods();

class _ForumHomeState extends State<ForumHome> {
  String title, content;
  //Subscribing for post details
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> snapshot;
  CollectionReference collectionReference =
      Firestore.instance.collection("posts");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        snapshot = datasnapshot.documents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {

    int num = snapshot?.length ?? 0;
    return Scaffold(
      appBar: AppBar(title: Text('Idea Forum '), backgroundColor: Colors.pink),
      body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});


0 commentaires

4 Réponses :


0
votes

Vous devez évaluer l'état de la connexion.

body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          if (snapshot.connectionState == ConnectionState.waiting)
          return CircularProgressIndicator();
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});


2 commentaires

Merci pour la réponse rapide.Mais ne peux pas utiliser votre solution .it dit que le 'Loading' Getter n'est pas défini pour la classe 'ConnectionState'. Essayez d'importer la bibliothèque qui définit «chargement», corrigeant le nom au nom d'un getter existant ou définissant un getter ou un champ nommé 'Chargement'


Désolé, mon erreur n'attend pas de charger.



2
votes

Je suggère de créer un contrôleur pour la stratégie de circulaire, comme dans l'exemple: xxx

Donc, chaque fois que vous trouvez nécessaire d'appeler une fonction pour collecter des données, il suffit de définir le paramètre _ControllerProgresse vers true, et quand Les données arrivent le renvoie à FALSE!


0 commentaires

0
votes

Vous devez créer un futur widget, xxx

pour le _buildwaitingscreen, vous pouvez utiliser xxx


0 commentaires

0
votes

Vous pouvez vérifier si l'instantané a des données et tandis que son chargement affichera un chargeur.Aso, j'ai prolongé votre liste de liste à un widget distinct

Widget _numcard(){
     if (snapshot != null) {
       ListView.builder(
            itemCount: num,
            itemBuilder: (context, index) {
              return new Card(
                elevation: 15.0,
                margin: EdgeInsets.all(10.0),
                child: new ListTile(
                    onTap: () {
                      //For udating the view count
                      snapshot[index]
                          .reference
                          .updateData({'Views': snapshot[index].data['Views'] + 1});
                    })});
          }else {return Container(
            child:CircularProgressIndicator());}}


0 commentaires