GitLocker: The Coding Marketplace

Description:

easy search bar

Easy Search Bar #

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 #

Installation #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
easy_search_bar: ^2.5.0
copied to clipboard
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)
)
)
)
copied to clipboard
And this is what it is supposed to look like now:
Scaffold(
appBar: EasySearchBar(
title: Text('Example'),
onSearch: (value) => setState(() => searchValue = value)
)
)
copied to clipboard
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')
)
)
);
}
}
copied to clipboard
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 #

Attribute
Type
Required
Description
Default value

title
Widget
✔️
The title to be displayed inside AppBar

onSearch
Function(String)
✔️
Returns the current search value.When search is closed, this method returns an empty value to clear the current search

actions
List<Widget>
❌
Extra custom actions that can be displayed inside AppBar

leading
Widget
❌
Can be used to add leading icon to AppBar

backgroundColor
Color
❌
Can be used to change AppBar background color

foregroundColor
Color
❌
Can be used to change AppBar foreground color

elevation
double
❌
Can be used to change AppBar elevation
5

iconTheme
IconThemeData
❌
Can be used to set custom icon theme for AppBar icons

appBarHeight
double
❌
Can be used to change AppBar height
56

animationDuration
Duration
❌
Can be used to set a duration for the AppBar search show and hide animation
Duration(milliseconds: 450)

isFloating
bool
❌
Can be used to determine if it will be a normal or floating AppBar
false

openOverlayOnSearch
bool
❌
Can be used to determine if the suggestions overlay will be opened when clicking search
false

titleTextStyle
TextStyle
❌
Can be used to set the AppBar title style

searchBackgroundColor
Color
❌
Can be used to set the search input background color

searchCursorColor
Color
❌
Can be used to set search textField cursor color

searchHintText
String
❌
Can be used to set search textField hint text

searchHintStyle
TextStyle
❌
Can be used to set search textField hint style

searchTextStyle
TextStyle
❌
Can be used to set search textField text style

searchTextKeyboardType
KeyboardType
❌
Can be used to set search textField keyboard type

searchBackIconTheme
IconThemeData
❌
Can be used to set custom icon theme for the search textField back button

systemOverlayStyle
SystemUiOverlayStyle
❌
Can be used to set SystemUiOverlayStyle to the AppBar

suggestions
List<String>
❌
Can be used to create a suggestions list

asyncSuggestions
Future<List<String>> Function(String value)
❌
Can be used to set async suggestions list

suggestionsElevation
double
❌
Can be used to change suggestion list elevation
5

suggestionLoaderBuilder
Widget Function()
❌
A function that can be used to create a widget to display a custom suggestions loader

suggestionTextStyle
TextStyle
❌
Can be used to change the suggestions text style

suggestionBackgroundColor
Color
❌
Can be used to change suggestions list background color

suggestionBuilder
Widget Function(String data)
❌
Can be used to create custom suggestion item widget

onSuggestionTap
Function(String data)
❌
Instead of using the default suggestion tap action that fills the textField, you can set your own custom action for it

debounceDuration
Duration
❌
Can be used to set the debounce time for async data fetch
Duration(milliseconds: 400)

showClearSearchIcon
bool
❌
Can be used to show search clear textField button
false

searchClearIconTheme
IconThemeData
❌
Can be used to set custom icon theme for the search clear textField button

searchTextDirection
TextDirection
❌
Can be used to change text direction
TextDirection.ltr

putActionsOnRight
bool
❌
Can be used to determine if the actions button will be placed at right of the appbar
false

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:

Seiji Tanaka
Victor Gabriel
Ivan Terekhin
Dolev Franco

Thank you for the support! #