How to bind an enum to DropdownButton in Flutter?

Question

Is it possible to bind a dropdownbutton to an enum? I have created an enum and trying to bind it to a dropdownbutton, see code below. Thanks for any help on this.

enum ClassType {
  Class-A,
  Class-B,
  Class-C,
  Class-D
}

DropdownButton<String>(
    value: classType,
    onChanged: (String newValue) {
        setState(() {
            viewModel.classType = newValue;
            });
        },
    items: ClassType.map((String classType) {
        return DropdownMenuItem<String>(
            value: classType,
            child: Text(classType),
        );
   }).toList(),
)

score 49 · Accepted Answer · edited Nov 07 '19 at 11:35

49

First, you need to update your DropdownButton type argument to ClassType and not String. In Dart, an enum declaration creates a new type, not Strings.

DropdownButton(...);

Next, you need to change the enum names. An enum has to be a valid dart identifier, meaning it can't contain the symbol -.

enum ClassType {A, B, C, D}

I've also updated your map method, there is not static iterator on your enum instance, you have to list them out. Also, you will need to convert them to Strings manually, either by calling toString which will give you "ClassType.A", ClassType.B" or by writing your own function to do this.

return DropdownButton<ClassType>(
    value: classType,
    onChanged: (ClassType newValue) {
      setState(() {
        viewModel.classType = newValue;
      });
    },
    items: ClassType.values.map((ClassType classType) {
      return DropdownMenuItem<ClassType>(
        value: classType,
        child: Text(classType.toString()));
    }).toList();
);

edited Nov 07 '19 at 11:35

Hamed

5,867
4
32
56

answered Apr 23 '18 at 02:37

Jonah Williams

20,499
6
65
53

Jonah, thanks for answering my question and providing an example. It seems like I'm not gaining value by using enum for a dropdownbutton as I have to list out all the enum item manually. Thanks again for your help on this. – Edmand Looi Apr 24 '18 at 18:01
No problem. Unfortunately dart enums are very limited so it is often better to use strings or const objects – Jonah Williams Apr 24 '18 at 19:18
1

@EdmandLooi you can change it to ClassType.values.map. This way you don't have to list it manually. – Rachit Rawat Aug 21 '18 at 23:55
This is the right answer but its missing the member variable classType, and the semi colon after toList() isnt needed. ClassType classType = ClassType.A; .... toList(), – DMacAttack Nov 29 '20 at 14:53
As an alternative to classType.toString() you could use the Flutter function describeEnum(classType) which strips off the enum class name from the classType.toString(). – kafran Nov 08 '21 at 13:18
@kafran why can't we have something that is an arbitrary representation of the enum. So that if I do EnumType.Something it prints whatever you want it to print so that we can have stuff like "Class-A" if we wanted? – dianesis Jul 18 '22 at 15:25
I use a Map to have ui friendly display values for my enum. Then it's just MyEnumStringMap[MyEnum] to get the string to display to the user in the dropdown. – Dylan Cross Aug 14 '23 at 15:46

How to bind an enum to DropdownButton in Flutter?

1 Answers1