Selected value from DropdownButton not showing in Flutter

Question

I have a DropdownButton which displays user type.

List<String> items = ['Engineer', 'Technician', 'Sales'];
String? currentSelectedValue;

                      child: DropdownButtonHideUnderline(
                        child: Padding(
                          padding:
                              const EdgeInsets.symmetric(horizontal: 20.0),
                          child: DropdownButton<String>(
                            dropdownColor: Colors.blue.shade100,
                            isExpanded: true,
                            hint: Text('Select the user Type'),
                            onChanged: (newValue) {
                              setState(() {
                                currentSelectedValue = newValue;
                              });
                              print(currentSelectedValue);
                            },
                            items: items.map((String value) {
                              return DropdownMenuItem(
                                value: value,
                                child: Text(
                                  value,
                                  style: TextStyle(color: Colors.black),
                                ),
                              );
                            }).toList(),
                            value: currentSelectedValue,
                          ),
                        ),
                      ),

I can see the list, but when I select a value, it is not displaying on the Text portion of the DropdownButton. I could see the selected value printed in the console. Can anyone help me to find the mistake?

Answer 1

Make sure to put currentSelectedValue outside the build method.

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

  @override
  State<Ft> createState() => _FtState();
}

class _FtState extends State<Ft> {
  List<String> items = ['Engineer', 'Technician', 'Sales'];
  String? currentSelectedValue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DropdownButtonHideUnderline(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: DropdownButton<String>(
            dropdownColor: Colors.blue.shade100,
            isExpanded: true,
            hint: Text('Select the user Type'),
            onChanged: (newValue) {
              setState(() {
                currentSelectedValue = newValue;
              });
              print(currentSelectedValue);
            },
            items: items.map((String value) {
              return DropdownMenuItem(
                value: value,
                child: Text(
                  value,
                  style: TextStyle(color: Colors.black),
                ),
              );
            }).toList(),
            value: currentSelectedValue,
          ),
        ),
      ),
    );
  }
}