Easy Search Bar

Buy Me A Pizza

A Flutter plugin to help you handle search inside your application. Can be used inside appBar or inside your application body depending on your necessities.

Preview

Default AppBar Preview Floating AppBar Preview

Installation

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  easy_search_bar: ^2.4.2

Migrating from 1.x.x to 2.x.x

Now instead of using the EasySearchBar widget inside AppBar widget, you can replace the AppBar with it.

This is what you used before:

Scaffold(
  appBar: AppBar(
    title: EasySearchBar(
      title: 'Example',
      onSearch: (value) => setState(() => searchValue = value)
    )
  )
)

And this is what it is supposed to look like now:

Scaffold(
  appBar: EasySearchBar(
    title: Text('Example'),
    onSearch: (value) => setState(() => searchValue = value)
  )
)

Basic example with suggestions

You can create a simple searchbar example widget with suggestions with the following example:

import 'package:easy_search_bar/easy_search_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchValue = '';
  final List<String> _suggestions = ['Afeganistan', 'Albania', 'Algeria', 'Australia', 'Brazil', 'German', 'Madagascar', 'Mozambique', 'Portugal', 'Zambia'];

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
      home: Scaffold(
        appBar: EasySearchBar(
          title: const Text('Example'),
          onSearch: (value) => setState(() => searchValue = value),
          suggestions: _suggestions
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () => Navigator.pop(context)
              ),
              ListTile(
                title: const Text('Item 2'),
                onTap: () => Navigator.pop(context)
              )
            ]
          )
        ),
        body: Center(
          child: Text('Value: $searchValue')
        )
      )
    );
  }
}

Note: If you want to create a FloatingAppBar and want the body content to go behind the AppBar you need to set extendBodyBehindAppBar Scaffold property to true. And it's also recommended to wrap your Scaffold inside a SafeArea.

API

AttributeTypeRequiredDescriptionDefault value
titleWidget:heavy_check_mark:The title to be displayed inside AppBar
onSearchFunction(String):heavy_check_mark:Returns the current search value.When search is closed, this method returns an empty value to clear the current search
actionsList<Widget>:x:Extra custom actions that can be displayed inside AppBar
leadingWidget:x:Can be used to add leading icon to AppBar
backgroundColorColor:x:Can be used to change AppBar background color
foregroundColorColor:x:Can be used to change AppBar foreground color
elevationdouble:x:Can be used to change AppBar elevation5
iconThemeIconThemeData:x:Can be used to set custom icon theme for AppBar icons
appBarHeightdouble:x:Can be used to change AppBar height56
animationDurationDuration:x:Can be used to set a duration for the AppBar search show and hide animationDuration(milliseconds: 450)
isFloatingbool:x:Can be used to determine if it will be a normal or floating AppBarfalse
openOverlayOnSearchbool:x:Can be used to determine if the suggestions overlay will be opened when clicking searchfalse
titleTextStyleTextStyle:x:Can be used to set the AppBar title style
searchBackgroundColorColor:x:Can be used to set the search input background color
searchCursorColorColor:x:Can be used to set search textField cursor color
searchHintTextString:x:Can be used to set search textField hint text
searchHintStyleTextStyle:x:Can be used to set search textField hint style
searchTextStyleTextStyle:x:Can be used to set search textField text style
searchTextKeyboardTypeKeyboardType:x:Can be used to set search textField keyboard type
searchBackIconThemeIconThemeData:x:Can be used to set custom icon theme for the search textField back button
systemOverlayStyleSystemUiOverlayStyle:x:Can be used to set SystemUiOverlayStyle to the AppBar
suggestionsList<String>:x:Can be used to create a suggestions list
asyncSuggestionsFuture<List<String>> Function(String value):x:Can be used to set async suggestions list
suggestionsElevationdouble:x:Can be used to change suggestion list elevation5
suggestionLoaderBuilderWidget Function():x:A function that can be used to create a widget to display a custom suggestions loader
suggestionTextStyleTextStyle:x:Can be used to change the suggestions text style
suggestionBackgroundColorColor:x:Can be used to change suggestions list background color
suggestionBuilderWidget Function(String data):x:Can be used to create custom suggestion item widget
onSuggestionTapFunction(String data):x:Instead of using the default suggestion tap action that fills the textField, you can set your own custom action for it
debounceDurationDuration:x:Can be used to set the debounce time for async data fetchDuration(milliseconds: 400)

Issues & Suggestions

If you encounter any issue you or want to leave a suggestion you can do it by filling an issue.

Contributions

Here's the list of our awesome contributors:

Thank you for the support!

Libraries

filterable_list