# GF SearchBar
GF SearchBar contains textfield for user input and the overlay container to show the search list collections.
# SearchBar Info
# Usage
The simple code of a basic GFSearchBar is as shown below.
import 'package:getwidget/getwidget.dart';
List list = [
"Flutter",
"React",
"Ionic",
"Xamarin",
];
GFSearchBar(
searchList: list,
searchQueryBuilder: (query, list) {
return list
.where((item) =>
item.toLowerCase().contains(query.toLowerCase()))
.toList();
},
overlaySearchListItemBuilder: (item) {
return Container(
padding: const EdgeInsets.all(8),
child: Text(
item,
style: const TextStyle(fontSize: 18),
),
);
},
onItemSelected: (item) {
setState(() {
print('$item');
});
},
),
Look and feel of the GFSearchBar can be customized using the GFSearchBar properties.
# Custom Properties
Name | Description |
---|---|
searchList | List of [text] or [widget] reference for users |
overlaySearchListItemBuilder | defines how the [searchList] items look like in overlayContainer |
hideSearchBoxWhenItemSelected | if true, it will hide the [searchBox] |
overlaySearchListHeight | defines the height of [searchList] overlay container |
searchQueryBuilder | can search and filter the [searchList] |
noItemsFoundWidget | displays the [widget] when the search item failed |
onItemSelected | defines what to do with onSelect [SearchList] item |
searchBoxInputDecoration | defines the input decoration of [searchBox] |