Reset DropDownMenu

Question

I have a page with a DropdownButton. The hint is 'Select your choice'. When an item is selected in the DropdownButton when I click on a button I want the DropdownButton to go back to the beginning and show 'Select your choice' again.

child: DropdownButton<String> (
  
  hint: Text(
    'Select your choice',
    style: TextStyle(
      color: Colors.white,
      fontFamily: 'Quicksand',
    ),
  ),
  borderRadius: BorderRadius.circular(10),
  dropdownColor: Color.fromRGBO(84, 84, 84, 10),
  icon: const Icon(
    Icons.arrow_drop_down,
    color: Colors.white,
  ),
  iconSize: 40,
  isExpanded: true,
  underline: SizedBox(),
  style: TextStyle(
    fontSize: 20,
    color: Colors.white,
    fontFamily: 'Quicksand',
  ),
  items: [
    DropdownMenuItem(
      child: Text(listaMedidas[0]),
      value: listaMedidas[0],
    ),
    DropdownMenuItem(
      child: Text(listaMedidas[1]),
      value: listaMedidas[1],
    ),
    DropdownMenuItem(
      child: Text(listaMedidas[2]),
      value: listaMedidas[2],
    ),
    DropdownMenuItem(
      child: Text(listaMedidas[3]),
      value: listaMedidas[3],
    ),
  ],
  onChanged: (value) => setState(() {
    escolha = value;
    limpar();
    textoObservacao(value);
  }),
  value: escolha,
),

score 0 · Answer 1 · answered Sep 02 '22 at 17:32

You can set null value to the DropdownButton, it will show the hint text.

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

  @override
  State<DropDownButtonTest> createState() => _DropDownButtonTestState();
}

class _DropDownButtonTestState extends State<DropDownButtonTest> {
  List<String> listaMedidas = ["A", "B"];

  String? escolha;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          DropdownButton<String>(
            hint: Text(
              'Select your choice',
              style: TextStyle(
                color: Colors.white,
                fontFamily: 'Quicksand',
              ),
            ),
            borderRadius: BorderRadius.circular(10),
            dropdownColor: Color.fromRGBO(84, 84, 84, 10),
            icon: const Icon(
              Icons.arrow_drop_down,
              color: Colors.white,
            ),
            iconSize: 40,
            isExpanded: true,
            underline: SizedBox(),
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              fontFamily: 'Quicksand',
            ),
            items: [
              for (int i = 0; i < listaMedidas.length; i++)
                DropdownMenuItem(
                  child: Text(listaMedidas[i]),
                  value: listaMedidas[i],
                ),
            ],
            onChanged: (value) => setState(() { escolha = value;}),
            value: escolha,
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                escolha = null;
              });
            },
            child: Text("Reset"),
          ),
        ],
      ),
    );
  }
}

Reset DropDownMenu

1 Answers1