GF Flutter SearchBar

Banner image

GF Flutter SearchBar

GFSearchBar is a flutter search bar wherein the user enters few letters in order to search the words from the list provided in the search section.

GFSearchBar contains textfield for user input and the overlay container to show the search list collections.

The simple code of a basic GF Flutter SearchBar is as shown below.

Basic GF SearchBar

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');
    });
  },
),

GF Flutter SearchBar Custom Properties

The look and feel of the GFSearchBar can be customized using the GFSearchBar properties.

NameDescription
searchListList of [text] or [widget] reference for users
overlaySearchListItemBuilderdefines how the [searchList] items look like in overlayContainer
hideSearchBoxWhenItemSelectedif true, it will hide the [searchBox]
overlaySearchListHeightdefines the height of [searchList] overlay container
searchQueryBuildercan search and filter the [searchList]
noItemsFoundWidgetdisplays the [widget] when the search item failed
onItemSelecteddefines what to do with onSelect [SearchList] item
searchBoxInputDecorationdefines the input decoration of [searchBox]

Last Updated: February 4, 2022