How to Fix this error: The following assertion was thrown building FutureBuilder<DataSnapshot>(dirty, state: _FutureBuilderState<DataSnapshot>#89711):

Question

This is the error:

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)".

This is function to get Firebase Realtime data:

Future<void> getCategoriesName() async {
   
    await  FirebaseDatabase.instance.reference().child('Categories').once()
        .then((DataSnapshot dataSnapshot){
      var key  = dataSnapshot.value.keys;
      for(var i in key)
      {
        CategoryItems categoryItems =  new CategoryItems(
            dataSnapshot.value[i]['CategoryName'],
            dataSnapshot.value[i]['Counter']
            

        );
        categoryItemList.add(categoryItems);
      }
      setState(() {
        print(categoryItemList.length);
      });

    });
  }

This is my Future Builder function:

 Container(
                        margin: EdgeInsets.only(bottom: 50,top: 100),
                        child: FutureBuilder(
                          future: FirebaseDatabase.instance.reference().child('Categories').child(_userPin).once(),
                          // ignore: missing_return
                          builder: (context, snapshot) {
                            if(snapshot.hasData){
                               if (snapshot.data!=null) {
                                return Expanded();
                               }else{
                                 return Loader();
                               }
                          }
                          }
                        ),
                      ),

Inside of Expanded I've ListView.builder, The above error throws for few seconds only as my data gets loaded it shows the screen with items. I have Stack widget on top of Container of FutureBuiler.

Answer 1

It looks like you are not returning anything from the builder callback function when snapshot.hasData is false. This explains why you are only seeing the error briefly until the data has been loaded from the database. You could return a CircularProgressIndicator widget from the builder callback function whilst you are waiting for data to arrive from the database. You could also get rid of the // ignore: missing_return comment because the builder callback function should always return a widget.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          margin: EdgeInsets.only(bottom: 50, top: 100),
          child: FutureBuilder(
            future: FirebaseDatabase.instance.reference().child('Categories').child(_userPin).once(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                if (snapshot.data != null) {
                  return Expanded();
                } else {
                  return Loader();
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}