Drop down button in flutter not switching values to the selected value

Question

I've recently started programming using dart and flutter and everything has been going smoothly for my app, although recently i wanted to add drop down menu to provide the user with multiple options to pick from. everything worked as planned however when i pick a value from the list it doesn't change the value in the box, it goes back to the hint or an empty box. any help would be appreciated!

here is my code for the dropdownbutton:

Widget buildDropdownButton() {
String newValue;

return new Padding(
  padding: const EdgeInsets.all(24.0),
  child: new Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      new ListTile(
        title: const Text('Frosting'),
        trailing: new DropdownButton<String>(
            hint: Text('Choose'),
            onChanged: (String changedValue) {
              newValue=changedValue;
              setState(() {
                newValue;
                print(newValue);
              });
            },
            value: newValue,
            items: <String>['None', 'Chocolate', 'Vanilla', 'ButterCream']
                .map((String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text(value),
              );
            }).toList()),
      ),
    ],
  ),
);
}

Answer 1

The error is because you are declaring a method variable newValue you must declare that variable as global inside your StatefulWidget.

   String newValue;

  Widget buildDropdownButton() {
  return new Padding(
    padding: const EdgeInsets.all(24.0),
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        new ListTile(
          title: const Text('Frosting'),
          trailing: new DropdownButton<String>(
              hint: Text('Choose'),
              onChanged: (String changedValue) {
                newValue=changedValue;
                setState(() {
                  newValue;
                  print(newValue);
                });
              },
              value: newValue,
              items: <String>['None', 'Chocolate', 'Vanilla', 'ButterCream']
                  .map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              }).toList()),
        ),
      ],
    ),
  );
  }

Answer 2

Faced same issue and none of the answers worked. Then, I found the solution in one of my old projects.

I was using it in a AlertDialog here.

So, Change DropdownButton to DropdownButtonFormField

and add onSaved exactly as onChanged:

onSaved: (value) {
    setState(() {
        _selectedValue = value;
    });
}

That's it. It will start working.

Answer 3

I had this problem although I was already using the solution above.

for anyone who has this problem and the above solution does not work, try separating FutureBuilder from the dropdown. this is how your final code should look like:

class TheFuture extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: myFuture(),
      builder: (ctx, snp) {
        if (!snp.hasData) return LoadingLine();
        return TheBuilder(snp.data);
      },
    );
  }
}

class TheBuilder extends StatefulWidget {
  const TheBuilder(this.mp);
  final Map<String, dynamic> mp;
  @override
  _MessageUSScreenFilterBodyState createState() =>
      _MessageUSScreenFilterBodyState();
}

class _MessageUSScreenFilterBodyState extends State<MessageUSScreenFilterBody> {
  int _selectedId;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<int>(
      selectedItemBuilder: (context) =>
          widget.mp['myData'].map((e) => Text(e.type)).toList(),
      items: widget.mp['myData']
          .map(
            (e) => DropdownMenuItem(
              child: Text(e.type),
              value: e.id,
            ),
          )
          .toList(),
      value: _selectedId,
      onChanged: (int _id) {
        setState(() {
          _selectedId = _id;
        });
      },
    );
  }
}