easy_search_bar 2.3.1 icon indicating copy to clipboard operation
easy_search_bar: ^2.3.1 copied to clipboard

AppBar with animated search functionality that can be used as regular or floating AppBar

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.3.1

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 behing 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✔️The title to be displayed inside AppBar
onSearchFunction(String)✔️Returns the current search value.When search is closed, this method returns an empty value to clear the current search
actionsList<Widget>Extra custom actions that can be displayed inside AppBar
backgroundColorColorCan be used to change AppBar background color
foregroundColorColorCan be used to change AppBar foreground color
elevationdoubleCan be used to change AppBar elevation5
iconThemeIconThemeDataCan be used to set custom icon theme for AppBar icons
appBarHeightdoubleCan be used to change AppBar height56
animationDurationDurationCan be used to set a duration for the AppBar search show and hide animationDuration(milliseconds: 450)
isFloatingboolCan be used to determine if it will be a normal or floating AppBarfalse
titleTextStyleTextStyleCan be used to set the AppBar title style
searchBackgroundColorColorCan be used to set the search input background color
searchCursorColorColorCan be used to set search textfield cursor color
searchHintTextStringCan be used to set search textfield hint text
searchHintStyleTextStyleCan be used to set search textfield hint style
searchTextStyleTextStyleCan be used to set search textfield text style
searchBackIconThemeIconThemeDataCan be used to set custom icon theme for the search textfield back button
systemOverlayStyleSystemUiOverlayStyleCan be used to set SystemUiOverlayStyle to the AppBar
suggestionsList<String>Can be used to create a suggestions list
asyncSuggestionsFuture<List<String>> Function(String value)Can be used to set async suggestions list
suggestionsElevationdoubleCan be used to change suggestion list elevation5
suggestionLoaderBuilderWidget Function()A function that can be used to create a widget to display a custom suggestions loader
suggestionTextStyleTextStyleCan be used to change the suggestions text style
suggestionBackgroundColorColorCan be used to change suggestions list background color
suggestionBuilderWidget Function(String data)Can be used to create custom suggestion item widget
onSuggestionTapFunction(String data)Instead of using the default suggestion tap action that fills the textfield, you can set your own custom action for it
debounceDurationDurationCan 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.

Thank you for the support! #

1
likes
120
pub points
68%
popularity

Publisher

shield icon for verified publishers4inka.com

AppBar with animated search functionality that can be used as regular or floating AppBar

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on easy_search_bar