How can I create a list with data from Cloud FireStore using Future Builder

Question

I'm trying to create a Flutter application with a List View which retrieves data from Cloud Firestore. I'm running into issues with the Future Builder. Find my code below:

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

void main() => runApp(OfferPage());

class OfferPage extends StatefulWidget {
@override
_OfferPageState createState() => _OfferPageState();
}

class _OfferPageState extends State<OfferPage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(primaryColor: Colors.green[900]),
    home: Scaffold(
      appBar: AppBar(
        title: Text('Click a Deal'),
        centerTitle: true,
        backgroundColor: Colors.green[900],
      ),
      body: OfferScroll(),
    ));
    }
     }

    class OfferScroll extends StatefulWidget {
    @override
    _OfferScrollState createState() => _OfferScrollState();
     }

    class _OfferScrollState extends State<OfferScroll> {

     Future getOffers() async {
     var firestore = Firestore.instance;
     QuerySnapshot qn = await firestore.collection("Offers").getDocuments();
     return qn.documents;
    }

    @override
    Widget build(BuildContext context) {
       return Container(
          child: FutureBuilder(
          future: getOffers(),
          builder: (_, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                 child: AwesomeLoader(
                 loaderType: AwesomeLoader.AwesomeLoader3,
                 color: Colors.green[900],
            ),
          );
        } else {
          ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) {
                return ListTile(
                    title: Text(snapshot.data[index].data["title"]));
              });
        }
      }),
);
}
}

I run into this error:

The following assertion was thrown building FutureBuilder(dirty, state: _FutureBuilderState#ea2bc): A build function returned null.

The offending widget is: FutureBuilder Build functions must never return null.

To return an empty space that causes the building widget to fill available room, return "Container()". To return an empty space that takes as little room as possible, return "Container(width: 0.0, height: 0.0)".

Marci Marci · Accepted Answer · 2020-06-04T16:35:58

You must add a return before the ListView.builder, otherwise the else branch will return null:

return ListView.builder(
    itemCount: snapshot.data.length,
    itemBuilder: (_, index) {
        return ListTile(
            title: Text(snapshot.data[index].data["title"]));
    },
);

How can I create a list with data from Cloud FireStore using Future Builder

1 Answers