How to Make Keyboard Appear when press the Search Icon and Select at the Text Field Widget In appbar?

Question

How can i implement that? I am new to flutter.......

I was making an AppBar that have an search Bar and I want to automatically pop up the Keyboard when I touch the search icon and ready to type into the TextField without needing to select the Textfield .

The appbar I implement is that the keyboard only pop up when I press the search Icon and press the TextField and only then the keyboard pop up. I wan to do that automatically that I only have to press the Search Icon.

AppBar(
  
  backgroundColor: Colors.transparent,
  elevation: 0,
  flexibleSpace: Center(
    child: isLoading
        ? Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.all(30.0),
                    child: Icon(Icons.search),
                  ),
                ),
              ),
              Expanded(
                flex: 9,
                child: TextField(
                  onChanged: (value) {
                    _selectedNames(value);

                    widget.controller2.add(1);
                  },
                  style: TextStyle(color: Colors.blue),
                  decoration: InputDecoration(
                      icon: Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                      hintText: "Search Here",
                      hintStyle: TextStyle(color: Colors.blue)),
                ),
              ),
              Expanded(
                flex: 1,
                child: GestureDetector(
                  child: Icon(Icons.cancel),
                  onTap: () {
                    setState(() {
                      isLoading = false;
                      selectedNamesForLaw = names;
                      print(isLoading);
                    });
                  },
                ),
              ),
            ],
          )
        : Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: IconButton(
                      icon: Icon(Icons.format_size),
                      onPressed: () {
                        getFontSizeDialog();
                      })),
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Text(
                  widget.text,
                  style: TextStyle(fontSize: 30, color: Colors.blueAccent),
                ),
              ),
              Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {
                        setState(() {
                          isLoading = true;
                        });
                      })),
            ],
          ),
  ),
  automaticallyImplyLeading: false,
);

Answer 1

Within you class, you need to define FocusNode, which you can do using the following code:

FocusNode focusNode;

If you're using a stateful widget, make sure to initialize the FocusNode inside your initState:

@override
  void initState() {
    super.initState();
    focusNode = FocusNode();
  }

TextField has an argument called focusNode which you can pass in your newly initialized FocusNode:

TextField(
      focusNode: focusNode,
    )

Then, change your code as such:

Container(
   child: Padding(
   padding: const EdgeInsets.all(30.0),
   child: GestureDetector(
      child: Icon(Icons.search),
      onTap: () => focusNode.requestFocus()
      ),
   ),
)

Answer 2

Whenever the search icon is pressed, set the focus to TextField and the keyboard will popup.

Slide focus to TextField in Flutter