What is Search Bar ?

A search bar 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 stuffs. The search bar is very much helpful to the user in such case. Not only in shopping apps, the search bar is used everywhere having some dynamic information.

In technical terms there are 2 commonly search algorithms:

  1. Linear Search: Linear search 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.
  2. Binary Search : Binary Search is useful when there are 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.

What is GF Search Bar?

GF Search Bar is a GetWidget widget component that is used in flutter project. It represent a text field that can be used to search through a collection. GF Search Bar can be used inside the app bar or in any page component wherever needed. It is very easy & simple to customize the search bar properties by :

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]

and many more property customization can be done.

How to Start:

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

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^1.0.10

Keep playing with the pre-built UI components.

Example to add a default GF Search Bar in your Flutter App:

import 'package:getwidget/getwidget.dart';

List list = [
    "Flutter",
    "Angular",
    "Node js",
  ];

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

The default GF Search Bar - A Flutter Widget will be shown like below image.

GF Search Bar

About Our team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundred and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that been using by more than 500+ business around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community.

We are heartily thankful to 20000+ user who have started using our library and shown the trust just within 8 weeks of launch. We are getting feedback from them & implementing wherever needed & of course it is our pleasure to get the valuable feedback from your side and work on that. The developer's feedback & suggestions are very important, we are keeping this at high priority.

GF Search Bar - A Flutter Search Bar widget

We have a separate team who are working on your feedback. There are many ways through which we are interacting with users, developers & take their suggestions as it is very important to walk along with developers because they are the one who uses GetWidget library & our perspective is to make the development process easiest & simplest for them. We have been trying to provide the best UI Library Flutter Dev Community that helps them to built an awesome app and save their development time.

So let's connect together and build your idea into a real time app with GetWidget Flutter UI Library. Now you could start with our documentation from how to getting start and go with each component.

FAQs

Q. Why use GF Search Bar?

Ans. You will get pre-designed Search Bar that can be used for searching data in your app. It is very easy to customize & will save your time of development.

Q. Can we customize GF Search Bar?

Ans. Yes, You can customize the shape, border, position of the Search Bar according to need. Some custom properties are :

searchList
overlaySearchListItemBuilder
hideSearchBoxWhenItemSelected
overlaySearchListHeight
searchBoxInputDecoration

Q. Where can we use GF Search Bar?

Ans. GF Search Bar can be used anywhere in your application & in app bar as well.

Q. Do you update the component in future?

Ans. Get Flutter team is very much passionate about the up-gradation of technology & its related modules. The library & components gets updated time to time.

Resources:

Docs: https://docs.getwidget.dev/gf-searchbar

Forum : https://forum.getwidget.dev

GitHub Repository: https://github.com/ionicfirebaseapp/getwidget