Creating a custom searchbar using a TextField typically refers to a user interface element that allows users to input search queries, and it is customized to meet specific requirements beyond the default behavior. Below is a picture of our custom searchbar.
After starting this practice you can try our previous tutorial here: Create BottomNavigatioBar In Flutter
Definition Custom Searchbar
This custom search bar using TextField is a tailored input field where users can type search queries. The TextField component is customized with specific features.
Styling Customization
Color, border, shadow, and focus behavior can be customized to match the design of the application.
decoration: InputDecoration
InputDecoration is a configuration class that allows developers to style and decorate Flutter input fields (TextField ). It defines how the input field will appear, what kind of input feedback is shown (like hints, error messages, icons), and how the input content is laid out visually
focusedBorder: OutlineInputBorder
Flutter’s InputDecoration defines how the border of a text input field (e.g., TextField ) looks when the field is focused (when the user has tapped on the field and is entering input). The OutlineInputBorder is one of the most commonly used borders, which draws a rounded rectangle around the input field.
prefixIcon
A magnifying glass or similar icon is placed inside the field or beside it to symbolize searching.
suffixIcon
suffixIcon refers to an interactive icon placed at the beginning (right side in left-to-right layouts) of an input field, such as a TextField. By default, the suffixIcon is purely decorative, but you can make it clickable by the onTap: () {} function.
OnSubmit Callback
When the user submits the search (either by pressing Enter or clicking the search button), it triggers a callback or search function to process the query.
Placeholder Text
Initial greyed-out text that guides users on what to search for.
Input Validation
Optional filters can be applied to restrict or validate search terms.
How Does The Searchbar Work?
Flutter searchbar that interacts with a PHP API typically works by sending the search query from the Flutter app to the PHP backend, which processes the request and returns the search results. We try to share about the search bar field and how it works.
Input through the Search Bar
The user types a search query into the Flutter search bar (TextField).
Query Submission
The query is submitted either when the user presses “Enter” or clicks a search button. The search bar sends the query string to the Flutter app’s controller (or onSubmitted callback).
HTTP Request to API
The Flutter app uses the HTTP package (like http or dio) to send an HTTP request (usually a GET or POST request) to the PHP API.
Custom Searchbar Code
class MainHeader extends StatefulWidget {
const MainHeader({super.key});
@override
State<MainHeader> createState() => _MainHeaderState();
}
class _MainHeaderState extends State<MainHeader> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
BoxShadow(color: Colors.grey.withOpacity(0.5), blurRadius: 8),
]),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 8),
child: Row(
children: [
const SizedBox(width: 5,),
Expanded(
child: TextField(
maxLines: 1,
autocorrect: false,
autofocus: false,
onSubmitted: (v) {},
onChanged: (v) {},
decoration: InputDecoration(
constraints: const BoxConstraints(maxHeight: 40),
isDense: true,
contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 0),
fillColor: Colors.grey.withOpacity(0.2),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(width: 1, color: Colors.grey)
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(
width: 1, color: Colors.redAccent
)
),
prefixIcon: const Icon(Icons.search_sharp, color: Colors.redAccent,),
suffixIcon: Container(
margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
alignment: Alignment.center,
constraints: const BoxConstraints(
minWidth: 80, maxWidth: 80
),
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(25),
),
child: const Text('Search', style: TextStyle(color: Colors.white),),
)
),
)),
IconButton.outlined(onPressed: (){}, icon: const Icon(Icons.notifications, color: Colors.redAccent,))
],
),
);
}
}
Conclusion
This custom searchbar using a TextField provides enhanced functionality and user experience by allowing tailored interaction for searching within an application. Through customization options like placeholder text, search icons, clear buttons, and onSubmit actions, developers can create intuitive and responsive search components. This flexibility allows the search bar to be aligned with the overall design and user needs, offering real-time suggestions, input validation, and more, resulting in a more efficient and user-friendly interface.
