title: Flutter - How to populate dropdown button with a future that returns and array of objects
body: <p>New to flutter and dart, struggling to populate this dropdown from an api that returns an object and within the object there is a data array of objects. Looks like:</p>
  <pre><code>{
      &quot;data&quot;: [
           {
          &quot;Country_str_code&quot;: &quot;AL&quot;,
          &quot;Region_str_code&quot;: &quot;Eur&quot;,
          &quot;Country_str_name&quot;: &quot;Albania&quot;
      },
      {
          &quot;Country_str_code&quot;: &quot;DZ&quot;,
          &quot;Region_str_code&quot;: &quot;Afr&quot;,
          &quot;Country_str_name&quot;: &quot;Algeria&quot;
      },
    ]
  }
  </code></pre>
  <p>Below is the code for my widget. I will like just show the country name but not sure if I will need the country code in the dropdown so save it on submission. I cannot even get this to show. I'm getting this error:</p>
  <pre><code>import 'dart:async';
  import 'dart:convert';
     
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'register.dart';
      
  Future&lt;List&lt;Country&gt;&gt; fetchCountries() async {
    final response = await http.get(Uri.https('localhost/msd', '/api/countries'));
    final responseJson = json.decode(response.body);
  
    print(responseJson['data']);
  
    if (response.statusCode == 200) {
   
    return (responseJson['data'] as List&lt;Country&gt;)
      .map((country) =&gt; country);
    } else {
      throw Exception('Failed to load countries');
    }
  }
  
  class Country {
    final String countryCode;
    final String countryName;
  
    Country({@required this.countryCode, @required this.countryName});
  
    factory Country.fromJson(Map&lt;String, dynamic&gt; json) {
      var countrNameFromJson = json['Country_str_name'];
      var countrCodeFromJson = json['Country_str_code'];
      String castedCountryName = countrNameFromJson.cast&lt;String&gt;();
      String castedCountryCode = countrCodeFromJson.cast&lt;String&gt;();
      return Country(
        countryCode: castedCountryCode,
        countryName: castedCountryName
      );
    }
  }
  
  class Location extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return LocationState();
    }
  
  }
  
  class LocationState extends State&lt;Location&gt; {
    Future&lt;List&lt;Country&gt;&gt; futureCountry;
    Map&lt;String, dynamic&gt; _selected = {'countryCode': '', 'countryName':'Select Country'};
  
    @override
    void initState() {
      super.initState();
      futureCountry = fetchCountries();
    }
  
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Registrate'),
          backgroundColor: Colors.blue[600],
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: &lt;Widget&gt;[
            Center(
              child:  FutureBuilder&lt;List&lt;Country&gt;&gt;(
                future: futureCountry,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    print (snapshot.data);
                    return DropdownButton(
                      value: _selected,
                      icon: Icon(Icons.arrow_drop_down),
                      iconSize: 30, 
                      elevation: 16,
                      style: TextStyle(color: Colors.black),
                      onChanged: (newValue) {
                        setState(() {
                          _selected = newValue;
                        });
                      },
                      items: snapshot.data
                        .map&lt;DropdownMenuItem&lt;String&gt;&gt;((Country value) {
                          return DropdownMenuItem&lt;String&gt;(
                            value: value.countryCode,
                            child: Text(value.countryName),
                          );
                      }).toList(),
                    );
                  } else if (snapshot.hasError) {
                    return Text(&quot;${snapshot.error}&quot;);
                  }
                  return CircularProgressIndicator();
                },
              ),
            ),
            SizedBox(
              width: double.maxFinite,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) =&gt; Register())
                  );
                },
                child: Text('Continue'),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all&lt;Color&gt;(Colors.red[900]),
                  foregroundColor: MaterialStateProperty.all&lt;Color&gt;(Colors.white),
                )
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>Currently getting this error:</p>
  <pre><code>type 'List&lt;dynamic&gt; is not a subtype of type 'List&lt;Country&gt;' in type cast
  </code></pre>
  <p>Can someone please guide me, as the error says clearly its an issue with the types but I'm not sure how solve this.</p>