Flutter DropDownButton using FutureBuilder to get JSON data

Question

I am trying to add a list of string to a DropdwonButton coming from a future, but it is not working properly, I am new to flutter.

I wrote a FutureBuilder to get data from API (Lits of countries) it works just fine but when I add data to the DropdwonButton it shows nothing and the error indicated is "method add called on null"

Here is my code:

declarations:

List countries = List();
Positions pos;
Future<Positions> _posi;

Future function:

Future<Positions> getPosition() async {
  var response = await http.get('https://umrahashal.com/api/getpositions');
var obj = jsonDecode(response.body);
 pos = Positions.fromJson(obj);
 return pos;
}

initState:

@override
  void initState() {
    super.initState();

  _posi = getPosition();
 
    _dropDownMenuItemsCountries = getDropDownMenuItemsCountries();
    currentCounty = _dropDownMenuItemsCountries[0].value;
  }

FutureBuilder:

 FutureBuilder(
             future: _posi,
             builder: (_, AsyncSnapshot<Positions> snapshot){
              
                switch (snapshot.connectionState) {
                    case ConnectionState.active:
                    case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                    break;
                    case ConnectionState.done:
                      if (snapshot.hasData && !snapshot.hasError) {
                        if (snapshot.data == null) {
                          return Text("No Data",style: new TextStyle(  fontSize: 20.0));
                        } else {
                          for(int i=0; i<= snapshot.data.countries.length;i++){
                           countries.add(snapshot.data.countries[i].name);
                          }
                     return 

  Padding(
              padding: EdgeInsets.only(top: size.height * 00.2383, bottom: 1),
              child: ListView(
                padding: const EdgeInsets.all(10),
                children: <Widget>[

Container(
                      height: size.height * 0.1047,
                      decoration: BoxDecoration(
                      color:NeumorphicTheme.baseColor(context),
                      borderRadius: BorderRadius.circular(29)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          new DropdownButton(
                    value: currentCounty,
                    items: _dropDownMenuItemsCountries,
                    onChanged: changedDropDownItemCountry,
                    
                  ),SizedBox(
                            width: size.width * .55,
                          ),
                         Image.asset('assets/images/r3.png'),
                        ],
                      )),
                      SizedBox(height: size.height * 0.0369),

have you debugged this and have you added a watch for the snapshot? I would assume that snapshot.data.countries. is not correct. So have a look what is passed as snapshot — w461, Oct 03 '20 at 14:23
Yes I did, And when I print the countries list it shows the countries grabbed from the API. @w461 — Taha teber, Oct 03 '20 at 15:09
at which line is the error thrown? Is _dropDownMenuItemsCountries a list of countries or of Text widgets for each country? — w461, Oct 03 '20 at 15:20

score 1 · Answer 1 · answered Oct 03 '20 at 15:45

1

you need to declare the items as list of widgets such as in

items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),

This creates a list [Text('One'), ....]

answered Oct 03 '20 at 15:45

w461

2,168
4
14
40

Here is the method I am passing: `List> getDropDownMenuItemsCountries() { List> itemscountry = new List(); for (String country in countries) { itemscountry.add(new DropdownMenuItem( value: country, child: new Text(country) )); } return itemscountry; }` – Taha teber Oct 03 '20 at 15:58

Flutter DropDownButton using FutureBuilder to get JSON data

1 Answers1