Flutter - DropdownButton not showing selected item

Question

When I select one of the items in the DropdownButton it is suppose to change from the hint text to the selected item.

It keeps on showing the hint text, like I did not select any thing. Although I print the selection to the console and I can see my selection there.

Your help will be appreciated. (I think I have read every post on here )

class DeviceSelectionPage extends StatefulWidget {
  const DeviceSelectionPage({Key? key}) : super(key: key);

  @override
  State<DeviceSelectionPage> createState() => _DeviceSelectionPageState();
}

class _DeviceSelectionPageState extends State<DeviceSelectionPage> {
  DateTime _dateTime = DateTime.now();
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    final List<String> itemsList = [
      'A1',
      'A22',
      '5E70CA9163C3EF2B',
      '1E2BD5D7D19EC75D',
      '9264ED34F8CF8A8F',
      '32D919C3F8ECC18E',
      '4ED07890CAC5A184',
      'F60AB38638788275',
      'AE65976D5F408107',
      '6EF6D048033567D5',
    ];
    String? selectedValue;

    return Scaffold(
        appBar: AppBar(
          title: const Text('Device Selection page'),
        ),
        body: Container(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  //width: 240,
                  padding: const EdgeInsets.symmetric(horizontal: 24.0),
                  decoration: BoxDecoration(
                      border:
                          Border.all(color: Colors.lightBlueAccent, width: 1.0),
                      borderRadius: kBorderRadius),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton(
                      hint: Text(
                        'Devices',
                        style: TextStyle(color: Colors.white54, fontSize: 20),
                      ),
                      style:
                          const TextStyle(color: Colors.orange, fontSize: 20),
                      borderRadius: kBorderRadius,
                      iconSize: 40,
                      elevation: 16,
                      onChanged: (value) {
                        setState(() {
                          selectedValue = value.toString();
                          setState(() {
                            selectedValue;
                            print(selectedValue);
                          });
                        });
                      },
                      value: selectedValue,
                      items: itemsList.map((listItem) {
                        return DropdownMenuItem<String>(
                          value: listItem,
                          child: Text(listItem),
                        );
                      }).toList(),
                    ),
                  ),
                )
              ],
            ),

When I select a device ('A22') I do see it getting printed in the console

D/EGL_emulation( 8542): app_time_stats: avg=1279.83ms min=1279.83ms max=1279.83ms count=1
I/flutter ( 8542): A22

Answer 1

Declare this outside of the build method.

String? selectedValue;

Answer 2

I will suggest you that you are calling setState method twice you can update your all value in one setState method.