searchfield: ^0.7.2

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

 flutter pub add searchfield

• Import the package

import 'package:searchfield/searchfield.dart';

Use the Widget

Example1

SearchField<Country>(
   suggestions: countries
     .map(
     (e) => SearchFieldListItem<Country>(
        e.name,
        item: e,
        // Use child to show Custom Widgets in the suggestions
        // defaults to Text widget
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(e.flag),
              ),
              SizedBox(
                width: 10,
              ),
              Text(e.name),
            ],
          ),
        ),
    ),
  )
  .toList(),
),

Example2 (Validation)

Form(
   key: _formKey,
   child: SearchField(
            suggestions: _statesOfIndia.map((e) =>
               SearchFieldListItem(e)).toList(),
            suggestionState: Suggestion.expand,
            textInputAction: TextInputAction.next,
            hint: 'SearchField Example 2',
            hasOverlay: false,
            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) {},
         )
   )

Customize the suggestions the way you want

Support for Overlays

• With v0.5.0 Searchfield now adds support for 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

• autoCorrect: Defines whether to enable autoCorrect defaults to true
• controller: TextEditing Controller to interact with the searchfield.
• emptyWidget: Custom Widget to show when search returns empty Results (defaults to SizedBox.shrink)
• focusNode : FocusNode to interact with the searchfield.
• 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.
• hint : hint for the search Input.
• initialValue : The initial value to be set in searchfield when its rendered, if not specified it will be empty.
• inputType: Keyboard Type for SearchField
• inputFormatters: Input Formatter for SearchField
• 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.
• offset : suggestion List offset from the searchfield, The top left corner of the searchfield is the origin (0,0).
• onSuggestionTap : callback when a sugestion is tapped it also returns the tapped value.
• onSubmit : callback when the searchfield is submitted, it returns the current text in the searchfield.
• suggestions(required) : List of SearchFieldListItem to search from. each SearchFieldListItem in the list requires a unique searchKey, which is used to search the list and an optional Widget, Custom Object to display custom widget and to associate a object with the suggestion list.
• SuggestionState: enum to hide/show the suggestion on focusing the searchfield defaults to SuggestionState.expand.
• 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.
• suggestionDirection : direction of the suggestions list, defaults to SuggestionDirection.down.
• suggestionItemDecoration : decoration for suggestionItem with ability to add color and gradient in the background.
• SuggestionAction : enum to control focus of the searchfield on suggestion tap.
• suggestionStyle:Specifies TextStyle for suggestions when no child is provided.
• textInputAction : An action the user has requested the text input control to perform throgh the submit button on keyboard.

You can find all the code samples here

Contributing

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