{"id":7365,"date":"2020-03-16T05:36:32","date_gmt":"2020-03-16T05:36:32","guid":{"rendered":""},"modified":"2024-11-14T11:57:45","modified_gmt":"2024-11-14T11:57:45","slug":"flutter-search-bar-widgets","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-search-bar-widgets\/","title":{"rendered":"Build a Custom Autocomplete Flutter Searchbar Widget for Your App"},"content":{"rendered":"

A Flutter search bar<\/strong><\/a> is an input field that is used to get the needed information from a collection of data through typing the words & keys related to that. Search bars are the most commonly used component in online shopping apps to find the stuff from a collection of stuff. The search bar is very much helpful to the user in such cases. Not only in shopping apps, but the search bar is also used everywhere having some dynamic information.<\/p>\n

In technical terms there are 2 commonly search algorithms:<\/p>\n

Linear Search<\/h3>\n

Linear search<\/strong> is a very simple search algorithm. In Linear search, we search an element or the value in a given array by traversing the array from the starting, till the desired element or value is found.<\/p>\n

Binary Search<\/h3>\n

Binary Search<\/strong> is useful when there is a large number of elements in an array and they are sorted. So a necessary condition for Binary search to work is that the array should be sorted.<\/p>\n

Flutter Search Bar with GFWidget<\/h3>\n

GF SearchBar<\/strong> is a GetWidget<\/strong> component that is used to build a flutter search bar<\/strong> in a flutter project. It represents a text field that can be used to search through a group. Flutter SearchBar<\/strong> can be used inside the app bar or in any page component wherever needed. It is very easy & simple to customize the GF SearchBar<\/strong>.<\/p>\n

searchList: <\/strong>List of [text] or [widget] reference for users<\/p>\n

overlaySearchListItemBuilder: <\/strong>Defines how the [searchList] items look like in overlayContainer<\/p>\n

hideSearchBoxWhenItemSelected: <\/strong>If true, it will hide the [searchBox]<\/p>\n

overlaySearchListHeight: <\/strong>Defines the height of [searchList] overlay container<\/p>\n

searchQueryBuilder: <\/strong>Can search and filter the [searchList]<\/p>\n

and much more property customization can be done.<\/p>\n

How to Get Started<\/h3>\n

If you are new with GetWidget<\/strong> then you should go ahead with Getting started<\/strong><\/a> will guide you on how to start building a beautiful flutter application with the GetWidget<\/strong> UI library. You have to install the package from pub.dev<\/strong>, import the package in your Flutter project.<\/p>\n

Install Package from pub.dev :<\/em><\/p><\/blockquote>\n

https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n

Import full package:<\/h3>\n

import ‘package:getwidget\/getwidget.dart’;<\/p>\n

Note: dependencies: getwidget: ^4.0.0<\/strong><\/p>\n

Keep playing with the pre-built UI components.<\/em><\/p><\/blockquote>\n

GFSearchBar<\/strong> is a search bar input field where the user presses some keys in order to get the relevant options from the list in the search bar that is provided. The below example shows a simple search bar and the result of the code is as shown in the image below.<\/p>\n

\n
import 'package:getwidget\/getwidget.dart';\n\nList list = [\n    \"Flutter\",\n    \"Angular\",\n    \"Node js\",\n  ];\n\nGFSearchBar(\n                searchList: list,\n                searchQueryBuilder: (query, list) => list\n                    .where((item) {\n                      return item!.toString().toLowerCase().contains(query.toLowerCase());\n                })\n                    .toList(),\n                overlaySearchListItemBuilder: (dynamic item) => Container(\n                      padding: const EdgeInsets.all(8),\n                      child: Text(\n                        item,\n                        style: const TextStyle(fontSize: 18),\n                      ),\n                    ),\n                onItemSelected: (dynamic item) {\n                  setState(() {\n                    print('$item');\n                  });\n                }),<\/code><\/pre>
Flutter Searchbar autocomplete Code example snippet<\/span><\/p>\n<\/figcaption><\/figure>\n
GF Search Bar Widget Custom Properties<\/h3>\n
The look and feel of the GFSearhBar<\/strong> can be customized accordingly by using the below-listed properties.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
searchList<\/strong><\/td>\nList of [text] or [widget] reference for users<\/td>\n<\/tr>\n
overlaySearchListItemBuilder<\/strong><\/td>\ndefines how the [searchList] items look like in overlayContainer<\/td>\n<\/tr>\n
hideSearchBoxWhenItemSelected<\/strong><\/td>\nif true, it will hide the [searchBox]<\/td>\n<\/tr>\n
overlaySearchListHeight<\/strong><\/td>\ndefines the height of [searchList] overlay container<\/td>\n<\/tr>\n
searchQueryBuilder<\/strong><\/td>\ncan search and filter the [searchList]<\/td>\n<\/tr>\n
noItemsFoundWidget<\/strong><\/td>\ndisplays the [widget] when the search item failed<\/td>\n<\/tr>\n
onItemSelected<\/strong><\/td>\ndefines what to do with onSelect [SearchList] item<\/td>\n<\/tr>\n
searchBoxInputDecoration<\/strong><\/td>\ndefines the input decoration of [searchBox]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Flutter Search Bar inside the AppBar<\/h3>\n
The GFSearchar<\/strong> can be used inside the GFAppbar<\/strong> that does the searching operation just like a normal search but with minimum lines of code in the appbar. If the search bar is true<\/code>then it displays a search bar text field with leading<\/strong>, trailing<\/strong> options.<\/p>\n
\"\"