Flutter / Android - moving focus from a TextField to a DropdownButton

Question

I have a textfield and a dropdownbutton on a screen. When I move from the textfield to choose an item and then back to the textfield I find this a little bit awkward.

1. Type in text field
2. Select dropdown by tapping it twice

My problem is that you have to tap twice, once to exit the textfield and the second to access the dropdown - is there a way to exit the textfield and open the dropdownlist in one tap? Is this built into Android or the Flutter controls?

Here is some flutter code that displays a dropdown and a textbox...

class _TextAndDropdownState extends State<TextAndDropdown> {
  int selectedDropdown;
  String selectedText;
  final textController = new TextEditingController();

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

    selectedDropdown = 1;

    textController.addListener(() => print(''));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Text and dropdown'),
      ),
      body: Container(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10.0),
            ),
            DropdownButton(value: selectedDropdown, onChanged: _dropdownChange, items: [
              DropdownMenuItem(
                child: Text('First'),
                value: 1,
              ),
              DropdownMenuItem(child: Text('Seconds')),
            ]),
            TextField(controller: textController),
          ],
        ),
      ),
    );
  }

  void _dropdownChange(val) {
    setState(() {
      selectedDropdown = val;
    });
  }
}

Answer 1

Sorry for the late Answer... I'm also finding the solution for this. now i get it.

Only you have to add this

 FocusScope.of(context).requestFocus(new FocusNode());

in your

_dropdownChange(val) method

void _dropdownChange(val) {
                      FocusScope.of(context).requestFocus(new FocusNode());///It will clear all focus of the textfield
            setState(() {
              selectedDropdown = val;
                     });
                           }

also refer Abdul Wahab answer

Answer 2

There's currently an ongoing issue in the flutter GitHub repo about this problem. It isn't solved as of yet, but there's a convenient workaround in place this comment implies.

You can add FocusManager.instance.primaryFocus.unfocus(); to the onTap() event of your DropdownButton that should 'steal' focuses off of the TextField that was previously focused on the dropdown tap.

Answer 3

@Dithest answer is correct but one problem still in this use case is when user tap outside of drop down menu then text field refocus and keyboard open . My work around of this issue is to add following code as well in onTap Listener of DropDownButton

FocusScope.of(context).requestFocus(new FocusNode());///It will clear all focus of the textfield