How to make a floating search bar

Question

The ones I found in different sites all have a search icon on the header and the search bar only appears when it is clicked but I want a search bar that is already there but also with a search button that is connected to it

Illustration:

Answer 1

Try this code(also with the logic to use the Search Functionality). If you like it.

---

Full Code

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool hasFocus = false;
  FocusNode focus = FocusNode();
  TextEditingController searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    focus.addListener(() {
      onFocusChange();
    });
    searchController.addListener(() {
      filterClints();
    });
  }

  @override
  void dispose() {
    searchController.dispose();
    focus.removeListener(onFocusChange);
    super.dispose();
  }

  void onFocusChange() {
    if (focus.hasFocus) {
      setState(() {
        hasFocus = true;
      });
    } else {
      setState(() {
        hasFocus = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    bool isSearching = searchController.text.isNotEmpty;
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.only(
                left: 5,
                right: 5,
                top: 0,
                bottom: 7,
              ),
              child: TextField(
                focusNode: focus,
                controller: searchController,
                // style: TextStyle(fontSize: 14, ),
                decoration: InputDecoration(
                  hintText: "Search",
                  label: const Text("Search customers & places"),
                  contentPadding: const EdgeInsets.symmetric(vertical: 2),
                  border: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(Radius.circular(50)),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.primary,
                    ),
                  ),
                  prefixIcon: const Icon(
                    Icons.search,
                  ),
                  suffixIcon: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (hasFocus)
                        InkWell(
                          onTap: () {},
                          child: const Icon(
                            Icons.clear,
                            color: Colors.grey,
                          ),
                        ),
                      const SizedBox(
                        width: 10,
                      ),
                      PopupMenuButton(
                        icon: const Icon(Icons.more_vert_sharp,
                            color: Colors.grey),
                        itemBuilder: (context) => [
                          const PopupMenuItem(),
                          PopupMenuItem(),
                        ],
                        onSelected: (value) {},
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

Preview

---

You can change the values prefixIcon/suffixIcon in textField to suit your needs.