(Flutter) ListView.builder using FutureBuilder not working - flutter

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.

Answer 2

It is not necessary to use setState for your case, try this:
Fetch async function
_fetchListItems() async {
number = await db.getNumber(userId);
List rawFavouriteList = await db.getList(number);
List _faouriteList = rawFavouriteList.map((item)=>Model.map(item)).toList();
return _faouriteList;
}
FutureBuilder
FutureBuilder(
future: _fetchListItems(),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
Container(
child: ListView.builder(
itemCount: snapshot.data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Text('${snapshot.data[index].title}');
}));
}
});