Cant get data's length in itemCount - api

Question

I want to get my API data's length to use in Listview.builder widget. I want to get my data from API which is 'mahalle'. And this data is a list of data. I want to get this data's length to build a list. But I got an error like this:
#4 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4546
...
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════
Class 'Future<dynamic>' has no instance getter 'length'.
Receiver: Instance of 'Future<dynamic>'
Tried calling: length
The relevant error-causing widget was
MahalleList
And the reference of the error is :
#action
Future<void> fetcMahalle() async {
// var data =
// await httpClient.getData(globals.SELECT_URL).then((mahalle) => mahalle);
networkService.getMahalle();
}
And I'm getting my data with :
Future getMahalle() async {
BaseOptions options = new BaseOptions(
baseUrl: globals.PROD_URL,
connectTimeout: 5000,
receiveTimeout: 3000,
);
Dio dio = new Dio(options);
dio.options.headers["Authorization"] = "Bearer ${globals.USER_TOKEN}";
try {
var response =
await dio.get(globals.SELECT_URL); //'api/hizlirapor/selects'
List<MahalleModel> mahalleList = response.data['mahalle']
.map<MahalleModel>((mahalle) => MahalleModel.fromJson(mahalle))
.toList();
return mahalleList;
} on DioError catch (e) {
debugPrint("ERRORR!!!!!!!!!!!!! ${e.error.toString()}");
return null;
}
}
And finally here's the widget I'm trying to use my list data's length :
Container _buildBody(
BuildContext context, ObservableFuture<List<MahalleModel>> future) {
return Container(
color: backgroundColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
_buildSearchBar(context),
RefreshIndicator(
onRefresh: mahalleStore.fetcMahalle,
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: mahalleList.length,
itemBuilder: (context, index) {
final mahalle = mahalleList[index];
return Container(
height: 100,
child: Card(
color: Colors.white,
margin: EdgeInsets.all(15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
color: mainColor,
width: 3,
height: 50,
),
SizedBox(
width: 15,
),
Icon(
AppIcon.mahalle_raporu,
color: mainColor,
),
SizedBox(
width: 15,
),
Text(
mahalle.mahalleAdi,
style: textStyle,
),
],
),
),
);
}),
),
],
),
);
}
Thanks for your all help !

Answer 1

FutureBuilder(
future:mahalleStore.fetchMahalle,
builder: (context, snapshot){
//whatever returns from this function, will be avaliable inside snapshot paremeter.
final mahalleList= snapshot.data;
switch (snapshot.connectionState) {
case ConnectionState.waiting:
{
return Center(child: CircularProgressIndicator(),);
}
case ConnectionState.done:
if (snapshot.hasData) {
// do what you want here
}
return Text("Error occured");
default:
//
}});
I deleted previous comment , check this one.

Answer 2

You should use FutureBuilder because getMahalle returns a Future.