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?

CodePudding user response：

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,
          ),
        ),
      ),
    );
  }
}