CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Marci
Marci

Reputation: 180

Future Builder don't show data from Cloud Firestore

I load data from Cloud Firestore from Firebase. In the print statement in the function loadAssignments() the loaded data are showing correct. But when i will show the data in the Text widget with the widget FutureBuilder it doesn't show the data and i don't know why. Can anyone please help me?

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class AssignmentPage extends StatefulWidget {
  @override
  _AssignmentPageState createState() => _AssignmentPageState();
}

class _AssignmentPageState extends State<AssignmentPage> {
  Future _loadAssignments;
  QuerySnapshot _assignments;

  @override
  void initState() {
    super.initState();
    _loadAssignments = loadAssignments();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bühlmaier App'),
        centerTitle: true,
        automaticallyImplyLeading: false,
      ),
      body: FutureBuilder(
        future: _loadAssignments,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
                itemCount: _assignments.documents.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      leading: Text('${_assignments.documents[index].data['Name'].toString()}'),
                    ),
                  );
                });
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => toPage(NewAssignmentPage()),
      ),
    );
  }

  Future<void> loadAssignments() async {
    _assignments = await Firestore.instance.collection('assignments').getDocuments();
    for (int i = 0; i < _assignments.documents.length; i++) {
      print('DATEN: ' + _assignments.documents[i].data['Name'].toString());
    }
    setState(() {});
  }
}

When i add the following code:

else if (snapshot.connectionState == ConnectionState.waiting) {
        return Text("No data");
      }

it works, but when i edit the code to:

else if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }

it don't load the data and the CircularProgressIndicator() is not moving.

Upvotes: 1

Views: 1044

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80952

Use the method in the future property:

          FutureBuilder(
            future: loadAssignments(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: ListTile(
                      leading: Text('${snapshot.data.documents[index].data['Name'].toString()}'),
                    ),
                  );
                    });
              } else if (snapshot.connectionState == ConnectionState.none) {
                return Text("No data");
              }
              return CircularProgressIndicator();
            },
          ),

Change the method to the following:

  Future<QuerySnapshot> loadAssignments() async {
    return await Firestore.instance.collection('assignments').getDocuments();
  }

Upvotes: 2

Related Questions