Flutter. How to implement editable text field with DropDownButton?

Question

I am trying to implement a TextField with DropDown menu, just like DropdownButtonFormField but with ability to edit it like ordinary text field. So user have options to fill the field by hand or to make a choice from drop down menu.

DropdownButtonFormField - can't edit by hand, and can't set menu rounded corners
TextFormField + DropdownButton as a suffix child. Seems good option but I cant set the suffix always visible, it disappears without focus!
Row ( separate TextFormField + separate DropDownButton)linked with TextEditController, seems work, but how to REMOVE empty space from DropDownButton where usually value lives? (value is null so it is not visible but the empty space for it presents) and the common question is this acceptable workaround for my purpose..?
PopupMenuButton - almost what I need, just button with menu, but this time it is not possible to set a max Height for drop down menu.

Unfortunately cant find clear and straightforward way to implement this. I hope I miss something. Any advice/help will be appreciated! Thanks in advance!

score 1 · Accepted Answer · answered Jun 27 '22 at 10:36

You can use the Visibility Widget in a stack . This is what I have managed to do

First you add a global variable to keep track of the visibility :

    bool isVisible = false;

Then you add this to create a FocusNode and keep track of your textfield :

   late FocusNode myFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    myFocusNode.addListener(_onFocusChange);
 
  }
  void _onFocusChange() {
    print("Focus: ${myFocusNode.hasFocus.toString()}");

    setState(() {
       isVisible=myFocusNode.hasFocus;
    });
   
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();

    super.dispose();
  }

Finally you do something like this to create a similar structure as mine :

return Scaffold(

      body:  Column(
        children: [
          Expanded(
            flex :1,
            child: Container(
              color: Colors.yellow,
              child: Row(children: [
                    Expanded(child: TextField(focusNode: myFocusNode,)),Expanded(child: Container())
                  ],),
            ),
          ),
          Expanded(flex :9,child: Stack(children: [Column(
            children: [
              Expanded(flex:5 ,child: Visibility(visible: isVisible ,child: Container(
                color: Colors.black,
                child: Center(child: Text("This shows only if textfield has focus",style: TextStyle(color: Colors.yellow),)),),)),
              Expanded(flex : 5 ,child: Container())
            ],
          )],)),
        ],
      )   );

Thanks, have done almost the same - with stack. But didnt know about Focus, thanks! — Parafin, Jun 27 '22 at 16:17
there is propably a better implementation but this is good enough I think — Lerex, Jun 27 '22 at 16:26

score 0 · Answer 2 · answered Sep 30 '22 at 13:27

0

You should use the Autocomplete-Widget:

https://api.flutter.dev/flutter/material/Autocomplete-class.html

By providing your own optionBuilder you can set your own suggestions.

answered Sep 30 '22 at 13:27

Searles

1,447
1
11
26

Flutter. How to implement editable text field with DropDownButton?

2 Answers2