(Flutter) ListView.builder using FutureBuilder not working

Question

I am trying to display items in a ListView using ListView.builder inside a FutureBuilder. My future function for FutureBuilder looks like this:

_fetchListItems() async {
   wait() async {
     number = await db.getNumber(userId); }

   await wait();
 List rawFavouriteList = await db.getList(number);

  setState((){
  rawFavouriteList.forEach((item){
       _faouriteList.add(Model.map(item));
           }});
return _faouriteList;
}

My FutureBuilder looks like this:

            FutureBuilder(
               future: _fetchListItems(),
               builder:(context, AsyncSnapshot snapshot) {
                     if (!snapshot.hasData) {
                   return Center(child: CircularProgressIndicator());
         } else {Container( child: ListView.builder(                                                  
                itemCount: _faouriteList.length,
                scrollDirection: Axis.horizontal,
             itemBuilder: (BuildContext context, int index) {
                  return Text(                                                 
                   '${_faouriteList[index].title}');
              }));}})

he following assertion was thrown building FutureBuilder(dirty, state: I/flutter (24728): _FutureBuilderState#f12a3): I/flutter (24728): A build function returned null. I/flutter (24728): The offending widget is: FutureBuilder I/flutter (24728): Build functions must never return null

Another exception was thrown: A build function returned null.

Note:

I tried to call _fetchListItems() from initState and not use FutureBuilder and that didn't work for me as well.

Here is a link to that case: (Flutter/Dart) Two async methods in initState not working

Please let me know if I should use FutureBuilder or initState to wait for List to load it's data. And how to make it work since none of the methods seem to work for me :(

Answer 1

Your fetch _fetchListItems method is not the problem as far as I can tell.

Your error message is very clear, " a build function returned null". In this case, the method that returns null is the anonymous function passed as the builder argument to the FutureBuilder. You're just missing the return keyword inside the else case because you're just creating the instance of Container but not returning it.

Something like this:

FutureBuilder(
    future: _fetchListItems(),
    builder:(context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
         } else {
            return Container(
                child: ListView.builder(                                                  
                    itemCount: _faouriteList.length,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                        return Text('${_faouriteList[index].title}');                                           
                    }
                )
            );
         }
     }
)

I don't know if there are any other problems with your code but this should solve the particular error message you are asking about.