Moving an icon into a TextField `leading` icon

Question

as you can see in the picture, when we press the search icon, I want the icon to pass into the textfield.

Basically, when I press the search icon, I want that icon to disappear into the textfield. Thank you for your help.

Before

After

return Scaffold(
  appBar: AppBar(
    backgroundColor: it_tool_main_grey_accent,
    elevation: 0,
    title: !isSearching
        ? Text('All')
        : TextField(
            decoration: InputDecoration(
                enabledBorder: const OutlineInputBorder(
                  borderSide:
                       BorderSide(color: Colors.black, width: 1.0),
                ),
                hintText: "Search"),
          ),
    automaticallyImplyLeading: false,
    leadingWidth: 55,
    leading: Padding(
      padding:
          EdgeInsets.only(left: MediaQuery.of(context).size.width / 30),
      child: DecoratedBox(
        decoration:
            BoxDecoration(shape: BoxShape.circle, color: Colors.white),
        child: IconButton(
          icon: customIcon,
          onPressed: () {
            setState(() {
              isSearching = !isSearching;
            });
          },
        ),
      ),
    ),
    
  ),
  body: Text("hi"),
);

Solution

You can get your desired result with the help of isSearching by just making following changes

Scaffold(
      appBar: AppBar(
        // backgroundColor: it_tool_main_grey_accent,
        elevation: 0,
        title: !isSearching
            ? Text('All')
            : Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: SizedBox(
                height: 40,
                child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                        contentPadding: EdgeInsets.all(8),
                        fillColor: Colors.white,
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide.none,borderRadius: BorderRadius.circular(10)
                        ),
                        prefixIcon: Icon(
                          Icons.search,
                          color: Colors.black,
                        ),
                        hintText: "Search"),
                  ),
              ),
            ),
        automaticallyImplyLeading: false,
        leadingWidth: 55,
        leading: isSearching
            ? null
            : Padding(
                padding: EdgeInsets.only(
                    left: MediaQuery.of(context).size.width / 30),
                child: DecoratedBox(
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                  child: IconButton(
                    icon: Icon(Icons.search,color: Colors.black),
                    onPressed: () {
                      setState(() {
                        isSearching = !isSearching;
                      });
                    },
                  ),
                ),
              ),
      ),
      body: Text("hi"),
    )

to

Comments

[hman_codes]

Do you need to animate it or do you just want it to move immediately?

[Kutluhan Özbakan]

Yes i need a animate but i dont know how can i do it.

[Vaidarbhi]

Helpful answer...!! But if I want to move action icon in appbar into textfield then what should I do?

[Diwyansh]

you can use suffixIcon for that