How to set different value instead of items's value in DropdownButton in flutter?

Question

I want to achieve different values behind the scene, for example, if the user selects "United State of America" behind the scene I want a value "USA" only. How can I achieve this?

Here is my button:

DropdownButton<String>(
                        isExpanded: true,
                        underline: SizedBox(),
                        icon: SvgPicture.asset("assets/icons/dropdown.svg"),
                        value: dropdownValue,
                        items: [
                          'Nepal',
                          'India',
                          'United States',
                          'Denmark',
                          'UK',
                          'World Wide'
                        ].map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                          );
                        }).toList(),
                        onChanged: (newValue) {
                          setState(() {
                            dropdownValue = newValue;
                          });
                        },
                      ),

JLP-Dev · Accepted Answer · 2020-06-01T20:02:30.927

What you can do is create a CountryOption class with a key('USA' in your example) and a fullName ('United States' in your example).

You then create a list of dropdown items of CountryOption instead of String, so you can store the currently selected CountryOption and you have both the key and fullName properties available for later use.

I would also recommend loading your list of items only once, not on each rebuild.

import 'package:flutter/material.dart';

class CountriesButton extends StatefulWidget {
  const CountriesButton({Key key}) : super(key: key);

  @override
  _CountriesButtonState createState() => _CountriesButtonState();
}

class _CountriesButtonState extends State<CountriesButton> {
  List<DropdownMenuItem<CountryOption>> _countryItems;
  CountryOption _selectedCountry;

  @override
  void initState() {
    // Get all countries
    List<CountryOption> countries = CountryOption.allCountries;

    // Initialise your items only once
    _countryItems = countries.map<DropdownMenuItem<CountryOption>>(
      (CountryOption countryOption) {
        return DropdownMenuItem<CountryOption>(
          value: countryOption,
          child: Text(countryOption.fullName),
        );
      },
    ).toList();

    // Initialiste your dropdown with the first country in the list
    // (might be different in your specific scenario)
    _selectedCountry = countries[0];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton<CountryOption>(
        isExpanded: true,
        underline: SizedBox(),
        icon: SvgPicture.asset("assets/icons/dropdown.svg"),
        value: _selectedCountry,
        items: _countryItems,
        onChanged: (newValue) {
          setState(() {
            _selectedCountry = newValue;
          });
        },
      ),
    );
  }
}

class CountryOption {
  final String key;
  final String fullName;

  CountryOption(this.key, this.fullName);

  static List<CountryOption> get allCountries => [
        CountryOption('nepal', 'Nepal'),
        CountryOption('india', 'India'),
        CountryOption('USA', 'United States'),
        CountryOption('denmark', 'Denmark'),
        CountryOption('uk', 'UK'),
        CountryOption('world', 'World Wide'),
      ];
}

Let me know if something is not clear or if you have any questions.

In line number 10 and 11. What does this code " List> _countryItems; CountryOption selectedCountry; " do? — Sunil Timilsina, Jun 01 '20 at 16:48
These lines are the declaration of your list of `DropDownMenuItem` widgets (used to populate the dropdown) and the currently selected `CountryOption`. They are declared at the state's scope so that they are accessible from anywhere in the state object. They both start with `_` to make them private. The list is initialised only once (in `initState ()`) for performance and memory issue. `_selectedCountry` is initialised in that same method to the value that will be selected by default in your dropdown when it first loads, and is then updated every time the user select an item. — JLP-Dev, Jun 02 '20 at 18:21

score 0 · Answer 2 · answered Jun 05 '22 at 18:49

0

Most simple method is to create a switch case and pass in the dropdownvalue. Then define your cases and default option. You can make this with a function inside the class or in separate class.

answered Jun 05 '22 at 18:49

Balu Nair V

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 06 '22 at 09:17

How to set different value instead of items's value in DropdownButton in flutter?

2 Answers2