How to use DropdownButton without setting an initial select in flutter?

Question

Hi I'm new to Flutter.

I had been getting an exception There should be exactly one item with [DropdownButton]'s value: . when using DropdownButton class. And it was resolved once by setting an initial select referring to this Q&A.

But I don't want to set an initial value. Is there any way not to set it but no exception?

Thanks,

P.S. I have two classes and one constant to show the dropdown button. Here is the constant that is a list for creating DropdownMenuItems:

List<String> prefectures = const [
  '北海道',
  '青森県',
  '岩手県',
  '宮城県',
  '秋田県',
  '山形県',
  '福島県',
  '茨城県',
  '栃木県',
  '群馬県',
...

And this is the class that expand DropdownButton.

class MyDropdownButton extends StatelessWidget {
  final String                 value;
  final void Function(String?) onChanged;
  final List<String>           options;
  final String?                hintText;
  const MyDropdownButton(
    {required this.value, required this.onChanged, required this.options, this.hintText, super.key}
  );

  List<DropdownMenuItem<String>> createOptions() {
    return options.toSet().map<DropdownMenuItem<String>>(
      (option) => DropdownMenuItem(value : option, child : Text(option))
    ).toList();
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child : DropdownButton(
        elevation : 3,
        items     : createOptions(),
        onChanged : onChanged,
        style     : const TextStyle(
          color    : Colors.black,
          fontSize : 15
     　 ),
        value     : value
      )
    );
  }
}

And this is where I use the class above:

MyDropdownButton(
  // They are also passed from other class.
  value     : widget.prefectureValue,     // this has null value
  onChanged : widget.onChangedPrefecture, // (String? newValue) => setState(() => _prefectureValue = newValue);
  options   : prefectures
)

can you sample with dummy data that will reproduce the same error — Md. Yeasin Sheikh, Jan 31 '23 at 21:54
Thank you for your comment! I edited my question so that you can see my code. Please check them. — Nao COMATSU, Feb 01 '23 at 05:10
seems there are no duplicate items now, can you provide the dataType on dropDownButton as I did and for initial value use null or `prefectures.first` — Md. Yeasin Sheikh, Feb 01 '23 at 08:42
Sorry for the late reply. I did all you told me, but it throws a new exception: `The following assertion was thrown building MyDropdownButton(dirty, dependencies: [MediaQuery]): There should be exactly one item with [DropdownButton]'s value: . Either zero or 2 or more [DropdownMenuItem]s were detected with the same value 'package:flutter/src/material/dropdown.dart': Failed assertion: line 892 pos 15: 'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem item) { return item.value == value; }).length == 1'` — Nao COMATSU, Feb 01 '23 at 18:31
I edited the post and then changed it to accept null value, but the exception one comment before was thrown. — Nao COMATSU, Feb 02 '23 at 05:18
I did exactly same you told me, and it works! I really appreciate your detailed information. Thank you. — Nao COMATSU, Feb 02 '23 at 06:32

score 0 · Answer 1 · answered Jan 31 '23 at 19:50

The solution is simple keep the initialValue null provided that you are on the latest version of flutter 3.5 or above

var _selectedItem;
  Widget buildDropdownButton() {
    return DropdownButton(
      hint: const Text('Select Item'),
      value: _selectedItem,
      onChanged: (value) {
        setState(() {
          _selectedItem = value;
        });
      },
      items: ["Item 1", "Item 2", "Item 3", "Item 4"]
          .map((e) => DropdownMenuItem(
                value: e,
                child: Text(e),
              ))
          .toList(),
    );
  }

the output will look like the following

Hi thank you for your answer. I tried to upgrade my flutter sdk version, but it still says the same thing: `There should be exactly one item with [DropdownButton]'s value: .` if I set a null value. — Nao COMATSU, Jan 31 '23 at 20:24

Md. Yeasin Sheikh · Accepted Answer · 2023-02-01T20:43:48.813

There should be exactly one item with [DropdownButton]'s value: means you are having same value more than one DropdownMenuItem. You can convert the data-list to Set, most time it works.

Here the items is

 List<String> items = [...];
 String? selectedItem;

And the dropDownButton

DropdownButton<String?>(
  items: items
      .toSet()
      .map(
        (e) => DropdownMenuItem<String?>(
          value: e,
          child: Text(e),
        ),
      )
      .toList(),
  onChanged: (value) {},
)

Fixed model

class MyDropdownButton extends StatelessWidget {
  final String? value;
  final void Function(String?) onChanged;
  final List<String> options;
  final String? hintText;
  const MyDropdownButton(
      {required this.value,
      required this.onChanged,
      required this.options,
      this.hintText,
      super.key});

  List<DropdownMenuItem<String>> createOptions() {
    return options
        .toSet()
        .map<DropdownMenuItem<String>>(
            (option) => DropdownMenuItem(value: option, child: Text(option)))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
        child: DropdownButton(
            elevation: 3,
            items: createOptions(),
            onChanged: onChanged,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 15,
            ),
            value: value));
  }
}

Here is how I am using it

List<String> prefectures = const [
    '北海道',
    '青森県',
    '岩手県',
    '宮城県',
    '秋田県',
    '山形県',
    '福島県',
    '茨城県',
    '栃木県',
    '群馬県',
  ];

  late String? value = prefectures.first;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          MyDropdownButton(
            value: value, //null,
            onChanged: (v) {
              setState(() {
                value = v;
              });
            }, 
            options: prefectures,
          ),

Thank you for your answer! But it seems it doesn't work. As I edited my post to describe more in detail, I'd be glad you to check. — Nao COMATSU, Feb 01 '23 at 07:50

How to use DropdownButton without setting an initial select in flutter?

2 Answers2