Flutter DropDownButton not showing once selected

Question

I have the following code

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

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

class _InteriorDropdownButtonState extends State<InteriorDropdownButton> {
  final interiorTypeList = [
    'Cuero',
    'Foamizada',
    'Vinilo',
    'Tela',
    'Microfibra'
  ];

  String? selectedInterior;

  DropdownButton<String> androidDropdown() {
    List<DropdownMenuItem<String>> dropdownItems = [];
    for (String interiorType in interiorTypeList) {
      var newItem = DropdownMenuItem(
        child: Text(
          interiorType,
          style: const TextStyle(
            fontWeight: FontWeight.w400,
            color: Colors.black,
            fontSize: 20,
          ),
        ),
        value: interiorType,
      );
      dropdownItems.add(newItem);
    }

    return DropdownButton<String>(
        items: dropdownItems,
        icon: const Icon(Icons.expand_more_outlined),
        iconSize: MediaQuery.of(context).size.height * 0.04,
        isExpanded: true,
        hint: const Text('Tapiceria'),
        style: TextStyle(
          fontWeight: FontWeight.w400,
          color: Colors.black,
          fontSize: MediaQuery.of(context).size.height * .025,
        ),
        onChanged: (value) {
          setState(() {
            selectedInterior = value;
          });
          print('Hola ${selectedInterior}');
          print('Hello ${value}');
        });
  }

  CupertinoPicker iOSPicker() {
    List<Text> pickerItems = [];
    for (String interiorType in interiorTypeList) {
      pickerItems.add(Text(interiorType));
    }

    return CupertinoPicker(
      diameterRatio: 1,
      itemExtent: 32.0,
      onSelectedItemChanged: (selectedIndex) {
        setState(() {
          selectedInterior = interiorTypeList[selectedIndex];
        });
      },
      children: pickerItems,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Platform.isIOS ? iOSPicker() : androidDropdown();
  }
}

The androidDropdown() is not working properly, once I selected an item, it doesn't stay in the button, instead, it shows the hint String.

In the console the print result is:

print('Hola ${selectedInterior}'); = Hola null, print('Hello ${value}'); Hello Cuero(selectedItem)

Can someone help me on this?

Answer 1

The DropdownButton needs to have access to the selected item, in this case, the selectedInterior variable.

You do this by passing it to the DropdownButton widget as a value property like this:

value: selectedInterior,

Update your androidDropdown method to this:

DropdownButton<String> androidDropdown() {
    // Other code 

    return DropdownButton<String>(
        items: dropdownItems,
        icon: const Icon(Icons.expand_more_outlined),
        iconSize: MediaQuery.of(context).size.height * 0.04,
        value: selectedInterior, //Add this
        isExpanded: true,
        hint: const Text('Tapiceria'),
        style: TextStyle(
          fontWeight: FontWeight.w400,
          color: Colors.black,
          fontSize: MediaQuery.of(context).size.height * .025,
        ),
        onChanged: (value) {
          setState(() {
            selectedInterior = value;
          });
          print('Hola ${selectedInterior}');
          print('Hello ${value}');
        });
 }