How to Solve DropdownButton Errors in Flutter

While adding DropdownButton or DropdownMenuItem in the widget tree of your Flutter app, you may encounter different errors or conditions. In this post, we are going to show you how to solve different kinds of errors that occur while adding DropdownButton:

Read this also: How to add Dropdown Button Widget in Flutter App

Error 1: No value is passed on DropdownMenuItem:

When you haven’t passed any value to DropdownMenuItem, you will get the error like below:

The following assertion was thrown building Container(Alignment.center, padding:
EdgeInsets.all(20.0)):
'package:flutter/src/material/dropdown.dart': Failed assertion: line 1303 pos 12:
'widget.items!.where((DropdownMenuItem<T> 
item) => item.value == widget.value).length == 1': is not
true.

To solve this error, pass the unique value to different DropdownMenuItem in DropdownButton, for example:

DropdownButton(
    value: "Tokyo",
    items: [
      DropdownMenuItem(
        child: Text("New York"),
        value: "New York"
      ),
      DropdownMenuItem(
        child: Text("Tokyo"),
        value: "Tokyo",
      )
    ],
)

Error 2: Either zero or 2 or more [DropdownMenuItem]s were detected with the same value

This error happens when the DropdownMenuItem inside DropdownButton doesn’t have unique values. If you are populating DropdownMenuItem from Array list, then make array list unique, or pass unique value to each DropdownMenuItem.

If you have passed “value” which is not exist in DropdownMenuItem, then also this error happens. The error message may look like below:

The following assertion was thrown building Home(dirty, state: _HomeState#76b27):
There should be exactly one item with [DropdownButton]'s value: Tokyo.
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 915 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

To solve, this error, keep the value to DropdownMenuItems unique and pass the value on the DropdownButton that exists inside its item. For example:

DropdownButton(
    value: "Tokyo",
    items: [
      DropdownMenuItem(
        child: Text("New York"),
        value: "New York"
      ),
      DropdownMenuItem(
        child: Text("Tokyo"),
        value: "Tokyo",
      )
    ],
    onChanged: (value){

    },
),

If you are populating items from the array, then do it like below:

List<String> countries = ["Canada", "Russia", "USA", "China", "United Kingdom", "USA", "India"];
var seen = Set<String>();
List<String> uniquelist = countries.where((country) => seen.add(country)).toList();

DropdownButton(
    value: uniquelist[0],
    items: uniquelist.map((country){
        return DropdownMenuItem( 
            child: Text(country),
            value: country,
        );
    }).toList(),
    onChanged: (country){
       print("You selected: $country");
    },
)

Error 3: DropdownButton is Disabled

This error happens when you haven’t passed the function to onChanged in DropdownButton: Pass the function like below to enable DropdownButton:

DropdownButton(
    value: "Tokyo",
    items: [
      DropdownMenuItem(
        child: Text("New York"),
        value: "New York"
      ),
      DropdownMenuItem(
        child: Text("Tokyo"),
        value: "Tokyo",
      )
    ],
    onChanged: (value){
       print("You selected $value");
    },
)

Error 4: DropdownButton value is not changing when Selected:

You need to build a Stateful widget screen and dynamically change the value parameter of DoropdownButton when value is changed: For example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  String selectval = "Tokyo";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Dropdown Button in Flutter"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
             child: Column(
                children: [ 
                    DropdownButton(
                        value: selectval,
                        items: [
                          DropdownMenuItem(
                            child: Text("New York"),
                            value: "New York"
                          ),
                          DropdownMenuItem(
                            child: Text("Tokyo"),
                            value: "Tokyo",
                          )
                        ],
                        onChanged: (value){
                          setState(() {
                             selectval = value.toString();
                          });
                        },
                    ),  
                ]
              )
          )
    );
  } 
}

In this way, you can change the selected value of DropdownButton in Flutter.

These are some of the basic error which occurs while adding DropdownButton or DropdownMenuItem inside the Dropdown button in Flutter. Follow the solution mentioned above, and make your DropdownButton error-free. For form controls and styling, learn how to style DropdownButtons in Flutter and add radio buttons.

import 'package:flutter/material.dart';

enum Country {
  nepal('Nepal', Icons.flag),
  usa('USA', Icons.language),
  uk('UK', Icons.public),
  canada('Canada', Icons.map);

  const Country(this.label, this.icon);
  final String label;
  final IconData icon;
}

void main() {
  runApp(const MaterialApp(home: ModernDropdownMenuDemo()));
}

class ModernDropdownMenuDemo extends StatefulWidget {
  const ModernDropdownMenuDemo({super.key});

  @override
  State<ModernDropdownMenuDemo> createState() => _ModernDropdownMenuDemoState();
}

class _ModernDropdownMenuDemoState extends State<ModernDropdownMenuDemo> {
  Country _selectedCountry = Country.nepal;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Modern Material 3 DropdownMenu')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Material 3 DropdownMenu with type-safe entries & zero assertion errors
              DropdownMenu<Country>(
                initialSelection: _selectedCountry,
                leadingIcon: Icon(_selectedCountry.icon),
                label: const Text('Select Country'),
                width: 280,
                onSelected: (Country? value) {
                  if (value != null) {
                    setState(() {
                      _selectedCountry = value;
                    });
                  }
                },
                dropdownMenuEntries: Country.values
                    .map<DropdownMenuEntry<Country>>((Country c) {
                      return DropdownMenuEntry<Country>(
                        value: c,
                        label: c.label,
                        leadingIcon: Icon(c.icon),
                      );
                    })
                    .toList(),
              ),
              const SizedBox(height: 24),
              Text(
                'Selected: ${_selectedCountry.label}',
                style: const TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}