searchfield 0.6.0

A highly customizable, simple and easy to use flutter Widget to add a searchfield to your Flutter Application. This Widget allows you to search and select from list of suggestions.

searchfield: ^0.5.6

A highly customizable simple and easy to use flutter Widget to add a searchfield to your Flutter Application.This Widget allows you to search and select from list of suggestions.

Think of this widget like a dropdownButton field with an ability

• to Search 🔍.
• to define height of each Suggestion Item
• to show dynamic suggestions as an overlay above the widgets or in the widget tree.
• to define max number of items visible in the viewport 📱
• to completely customize the input searchfield like a normal textfield
• to customize the suggestions with colors and gradients

list of all the properties mentioned below

Getting Started

Installation

• Add the dependency

dependencies:
  searchfield: ^0.5.6

• Import the package

import 'package:searchfield/searchfield.dart';

Use the Widget

Example1

 SearchField(
    suggestions: [
    'United States',
    'America',
    'Washington',
    'India',
    'Paris',
    'Jakarta',
    'Australia',
    'Lorem Ipsum'
    ],
),

Example2 (Validation)

Form(
   key: _formKey,
   child: SearchField(
   suggestions: _statesOfIndia,
   hint: 'SearchField Sample 2',
   searchStyle: TextStyle(
                  fontSize: 18,
                  color: Colors.black.withOpacity(0.8),
               ),
   validator: (x) {
      if (!_statesOfIndia.contains(x) || x.isEmpty) {
            return 'Please Enter a valid State';
      }
      return null;
      },
   searchInputDecoration:
         InputDecoration(
            focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
            color: Colors.black.withOpacity(0.8),
         ),
   ),
   border: OutlineInputBorder(
   borderSide: BorderSide(color: Colors.red),
   ),
   ),
   maxSuggestionsInViewPort: 6,
   itemHeight: 50,
   onTap: (x) {
      print(x);
   },
 ),
),

Customize the suggestions the way you want

Support for Overlays

• With v0.5.0 Searchfield now supports Overlays which shows the suggestions floating on top of the Ui.
• The position of suggestions is dynamic based on the space available for the suggestions to expand within the viewport.
• Overlay is enabled by default, You can disable this floating suggestions by passing the property hasOverlay=false.
• However Theres also a known issue, when toggling hasOverflow from false to true you should manually do a hot restart to make it work.

Properties

• controller: TextEditing Controller to interact with the searchfield.
• suggestions : List of SearchFieldListItem to search from.(required), each item in the list requires a unique searchKey, which is used to search the list. SearchFieldListItem also takes a optional widget child to display custom widget in the suggestion list.
• SuggestionState: enum to hide/show the suggestion on focusing the searchfield defaults to SuggestionState.expand.
• textInputAction : An action the user has requested the text input control to perform throgh the submit button on keyboard.
• initialValue : The initial value to be set in searchfield when its rendered, if not specified it will be empty.
• hasOverlay : shows floating suggestions on top of the Ui if disabled the suggestions will be shown along the searchInput. if not specified defaults to true.
• onTap : callback when a sugestion is tapped it also returns the tapped value.
• hint : hint for the search Input.
• searchStyle : textStyle for the search Input.
• searchInputDecoration : decoration for the search Input similar to built in textfield widget.
• suggestionsDecoration : decoration for suggestions List with ability to add box shadow background color and much more.
• suggestionItemDecoration : decoration for suggestionItem with ability to add color and gradient in the background.
• itemHeight : height of each suggestion Item, (defaults to 35.0).
• marginColor : Color for the margin between the suggestions.
• maxSuggestionsInViewPort : The max number of suggestions that can be shown in a viewport.
• SuggestionAction : enum to control focus of the searchfield on suggestion tap

You can find all the code samples here

Contributing

You are welcome to contribute to this package, to contribute please read the contributing guidelines.