CODEWITHSUNDEEP
firebasedartgoogle-cloud-firestoreflutter
silentsudo
silentsudo

Reputation: 6963

Firestore async load and populate listview flutter

Hi i am trying to get data from firestore and populate listview, following is my code, but i am getting exception since my async call is not complete how can i wait for that asyn call to get completed and populate my listview my code is below:

    import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:test_flutter/pkg/Feed.dart';

class FeedLoader {
  final CollectionReference _colReference;

  FeedLoader(Firestore _firestore)
      : _colReference = _firestore.collection(Feed.getDocumentName()) {}

  Future<List<Feed>> load() async {
    final List<Feed> feeds = new List<Feed>();
    await for (QuerySnapshot qs in _colReference.snapshots) {
      for (DocumentSnapshot ds in qs.documents) {
        feeds.add(Feed.fromJson(ds.data));
      }
      return feeds;
    }
    return feeds;
  }
}

This is my Widget

    import 'package:flutter/material.dart';
import 'package:test_flutter/pkg/FeedLoader.dart';
import 'package:test_flutter/pkg/Feed.dart';

class FeedWidget extends StatefulWidget {
  final FeedLoader feedLoader;

  const FeedWidget({Key key, this.feedLoader}) : super(key: key);

  createState() => new FeedWidgetState(feedLoader);
}

class FeedWidgetState extends State<FeedWidget> {
  final List<Feed> _feeds = new List<Feed>();
  final FeedLoader _feedLoader;
  final TextStyle fontStyle = const TextStyle(fontSize: 16.0);

  FeedWidgetState(this._feedLoader);

  @override
  Widget build(BuildContext context) {
    print(_feedLoader == null);
    _feedLoader
        .load()
        .then((feeds) => () {
              print("Got call back now");
              _feeds.addAll(feeds);
            })
        .catchError((e) => handleError(e));

    print("Feeds size ${_feeds}");
    return _buildListView(context);
  }

  void handleError(e) {
    print("FeedLoaderException ${e}");
  }

  Widget _buildListView(BuildContext context) {
    return new ListView.builder(
      padding: const EdgeInsets.all(6.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();

        final index = i ~/ 2;
//        pagination
//        if (index >= contents.length) {
//          contents.addAll(generateWordPairs().take(10));
//        }
        return _buildRowContent(context, _feeds[i]);
      },
    );
  }

  Widget _buildRowContent(BuildContext context, Feed content) {
    return new ListTile(
      title: new Text(
        "${content.getTitle()}",
        style: fontStyle,
      ),
    );
  }
}

Upvotes: 3

Views: 3491

Answers (1)

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 276997

You can use StreamBuilder and FutureBuilder to build widgets asynchronously

You could for example do 

return new StreamBuilder(
   stream: Firestore....snapshot,
   builder: (context, snapshot) {
      if (snapshot.hasData) {
         final feeds = snapshot.data.map(Feed.fromJson);
         return new ListView(
              ....
         );
      }
   },
)

Upvotes: 4

Related Questions