FutureBuilder not populating value

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?

score 0 · Answer 1 · answered Nov 22 '21 at 01:15

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();
  }
);

FutureBuilder not populating value

1 Answers1

Side note: