Dropdownbutton value in flutter not changing during onchange event

Question

I am new to using a Dropdownbutton but I copied this code from a material example and the value is not changing when I pick a different category. Im not sure whats going on but the value changes internally when I debug but the displayed text stays at the default setting which is "Choose a goal category".

DropdownButton<String>(
                   value: dropdownValue,
                   icon: Icon(Icons.check_circle_outline),
                   iconSize: 24,
                   elevation: 16,
                   style: TextStyle(
                  color: Colors.blue[300]
                  ),
                    underline: Container(
                    height: 2,
                    color: Colors.blue[300],
                 ),
                      onChanged: (String newValue) {
                       setState(() {
                      dropdownValue = newValue;
                       updateCategory(newValue);
             });
         },
                    items: <String>['Choose a goal category', 'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal']

                    .map<DropdownMenuItem<String>>((String value) {
                     return DropdownMenuItem<String>(
                     value: value,
                     child: Text(value),
                  );
                 })
            .toList(),
      ),

Answer 1

Replace this.

items : <String>['Choose a goal category', 'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal']
.map((String dropDownStringItem){
   return DropdownMenuItem<String>{
      value : dropDownStringItem,
      ...
   }
}).toList(),

I hope to help you

Answer 2

Step 1: declare String dropdownValue; do not set value
Step 2: use hint and set to Text('Choose a goal category')
Step 3: items remove string "Choose a goal category"

code snippet

String dropdownValue;
...
DropdownButton<String>(              
              hint: Text('Choose a goal category'),
              value: dropdownValue,
              icon: Icon(Icons.check_circle_outline),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.blue[300],
              ),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>[
                'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal'
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Center(
            child: DropdownButton<String>(
              //isDense: true,
              hint: Text('Choose a goal category'),
              value: dropdownValue,
              icon: Icon(Icons.check_circle_outline),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.blue[300],
              ),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>[
                'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal'
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}