FutureBuilder not populating value - flutter

Question

In my main.dart I have an async function to get data from an URL.
getShopLength() async {
final queryParameters = {
'api_key': '123',
'user_id': '123',
'lat': '123',
'long': '123',
'km': '123',
};
var response = await http.get(Uri.https('google.de','getSth', queryParameters));
var jsonData = jsonDecode(response.body);
List<Shops> shops = [];
for(var x in jsonData) {
Shops shop = Shops(x['name'], x['slogan']);
shops.add(shop);
}
return shops.length;
}
In my home.dart I want to get the value from getShopLength() but I always get the error: type 'Future<dynamic> is not a subtype of type 'Future<String>?'
I try to save the return value into valueShop and pass it to buildRestaurantRow('Top Angebote', context, valueShop)
home.dart
#override
Widget build(BuildContext context) {
var valueShop = "0";
FutureBuilder<String>(
future: getShopLength(),
builder: (context, snapshot) {
if (snapshot.hasData) {
valueShop = snapshot.data;
}
return CircularProgressIndicator();
}
);
return Scaffold(
appBar: buildSearchBar(context),
body: Padding(
padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
child: ListView(
children: <Widget>[
SizedBox(height: 20.0),
buildRestaurantRow('Top Angebote', context, valueShop),
SizedBox(height: 10.0),
buildRestaurantList(context),
SizedBox(height: 10.0),
buildCategoryRow('Nach Kategorie', context),
SizedBox(height: 10.0),
buildCategoryList(context),
SizedBox(height: 20.0),
buildCategoryRow('Deine Favoriten', context),
SizedBox(height: 10.0),
buildFriendsList(),
SizedBox(height: 30.0),
],
),
),
);
}
What am I missing?

Answer 1

So the problem lies here:
FutureBuilder<String>(
future: getShopLength(),
Your future builder has a type of string, which means that the future should be of type Future<String>, but when you declared the function getShopLength, you did this:
getShopLength() async {
You did not give it a return type, because of that, the default return type is Future<dynamic>.
The obvious solution is giving the function a return type, but you have another problem:
The futurebuilder expects a string value, but the function returns a number, so which is it?
If you want to return a string of the length, you can just do this:
Future<String> getShopLength() async {
...
return shops.length.toString();
}
Or you can also change the futurebuilder's value to be int:
Future<int> getShopLength() async {
...
return shops.length;
}
...
int valueShop = 0;
FutureBuilder<int>(
future: getShopLength(),
builder: (context, snapshot) {
if (snapshot.hasData) {
valueShop = snapshot.data;
}
return CircularProgressIndicator();
},
);
Side note:
Ok, I have a couple of things to mention about your code:
First of all, on your getShopsLength function, you have two lists, jsonData and shops, you don't actually need both, you can just use one:
var jsonData = jsonDecode(response.body);
return jsonData.length // no need for the shops list.
Second of all, what's up with your builder code?? You first declare a FutureBuilder, but then completely ignore it and move on to a Scaffold widget? I believe the scaffold code should be inside the future builder, as it stands, you will never see the circular progress indicator:
From:
var valueShop = '0';
FutureBuilder<String>(
future: getShopLength(),
builder: (context, snapshot) {
if (snapshot.hasData) {
valueShop = snapshot.data;
}
return CircularProgressIndicator();
}
);
return Scaffold(...);
To:
return FutureBuilder<String>(
future: getShopLength(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var valueShop = snapshot.data;
return Scaffold(...);
}
return CircularProgressIndicator();
}
);