How to make a floating search bar - flutter

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.