select initial value for a Dropdown button in flutter

Viewed 1976

I have searched similar answers to my question but non sufficed mine, Maybe my approach if difficult.

Here is what I'm trying to do, I have an API for country values. for registering the user I use a dropdown as below which maps the CountryApi values to its items. In my hand I have the country name only.

how can I set the initial value of that dropdown to match with the country name I have?

Country Select DropDown

CountryModal _selectedCountry;

onChangeDropdownItem(CountryModel selectedCountry) {
    setState(() {
      // fieldFocusChange(context, _countryFocusNode, _phoneFocusNode);
      _selectedUserCountry = selectedCountry;
      _userCountry = _selectedUserCountry.name;
      countryCodeTxt = _selectedUserCountry.dial_code;
      countryCode = _selectedUserCountry.code;
      _userCountryId = _selectedUserCountry.id.toString();
    });
  }
/////
userCountryDropdown = Container(
      padding: EdgeInsets.all(2.0),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(
            10.0,
          )),
          color: Color(0xFFF0F0F0),
          shape: BoxShape.rectangle),
      child: DropdownButton<CountryModel>(
        isExpanded: true,
        hint: Text(
          'Select Country',
          style: kMainContentStyleLightBlack,
        ),
        autofocus: true,
        value: _selectedUserCountry,
        isDense: false,
        onChanged: onChangeDropdownItem,
        items: _countryList.map((country) {
          return DropdownMenuItem<CountryModel>(
            child: new Text(country.name),
            value: country,
          );
        }).toList(),
        style: kMainContentStyleLightBlack,
      ),
    );

My Country API looks in this format

CountryAPI

[
  {
    "id": 1,
    "code": "AF",
    "dial_code": "+93",
    "name": "افغانستان"
  },
  {
    "id": 2,
    "code": "AX",
    "dial_code": "+358",
    "name": "Åland"
  },
....

Can someone help me to figure this out and workaround to resolve?

2 Answers
The value property is what specifies the default selected value for the drop down.
    Container(
  padding: EdgeInsets.all(2.0),
  width: MediaQuery.of(context).size.width,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(
        10.0,
      )),
      color: Color(0xFFF0F0F0),
      shape: BoxShape.rectangle),
  child: DropdownButton(
    isExpanded: true,
    hint: Text(
      'Select Country',
      style: kMainContentStyleLightBlack,
    ),
    autofocus: true,
    value: _selectedUserCountry,
    isDense: false,
    onChanged: onChangeDropdownItem,
    items: _countryList.map((country) {
      return DropdownMenuItem(
        child: new Text(country.name),
        value: country.name,
      );
    }).toList(),
    style: kMainContentStyleLightBlack,
  ),
);

I didn't read your question much but here is the reference for you. dropdownValue is the default value here

 Padding(
                    padding: EdgeInsets.all(8.0),
                    child: DropdownButton<String>(
                      value: dropdownValue,
                      icon: Icon(Icons.arrow_drop_down),
                      iconSize: 24,
                      elevation: 16,
                      // style: TextStyle(color: Colors.white),
                      underline: Container(
                        height: 2,
                        width: double.infinity,
                        // color: Colors.deepPurpleAccent,
                      ),
                      onChanged: (String newValue) {
                        setState(() {
                          print(newValue);
                          dropdownValue = newValue;
                        });
                      },
                      items: <String>['Male', 'Female']
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                  ),
Related