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),

Answer 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'), ....]