Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to show DropdownButton's menu on TextField's onTap()

I am doing to do app as a practice, so I have some TextField widgets, one of them is to show my dropdown list when pressed on TextField. I understand that I should use some onTap() or GestureDetector, but I am not getting how exactly I should show ANY widget on a click.

Container buildDropdownContainer() {
  return Container(
    margin: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: const Color.fromARGB(255, 70, 70, 70),
    ),
    child: TextField(
      readOnly: true,
      decoration: InputDecoration(
        prefixIcon: Icon(
          Icons.priority_high_outlined,
          color: Colors.orange,
        ),
        border: InputBorder.none,
        hintText: "Priority",
      ),
      onTap: () {},
    ),
  );
}

 return DropdownButton(
      padding: EdgeInsets.symmetric(horizontal: 50),
      hint: Text("Priority"),
      value: dropdownValue,
      onChanged: (value) {
        setState(() {
          dropdownValue = value!;
        });
      },
      items: dropdownList.map((e) {
        return DropdownMenuItem(
          value: e,
          child: Text(e),
        );
      }).toList(),
    );

So the question is: How to show up my dropdown list by pressing my textfield?

Tags:

2

Answers


  1. 0

    you can use flutter_typeahead for dropdown on tap of textfield

    Login or Signup to reply.
  2. 0

    Try below code hope its help to you.

    Variables:

    String? dropdownValue;
final List<String> dropdownList = ['High', 'Medium', 'Low'];

    UI

    TextField(
      decoration: InputDecoration(
        prefixIcon: Icon(
          Icons.priority_high_outlined,
          color: Colors.orange,
        ),
        border: InputBorder.none,
        hintText: dropdownValue ?? "Priority",
      ),
      readOnly: true,
      onTap: () {
        showMenu(
          context: context,
          position: RelativeRect.fromLTRB(10, 60, 10, 10), // adjust on your need
          items: dropdownList.map((String value) {
            return PopupMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ).then((value) {
          if (value != null) {
            setState(() {
              dropdownValue = value;
            });
            print('Selected Value - $dropdownValue');
          }
        });
      },
    )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search