https://github.com/blackshadowsoftwareltd/animation_search_bar
Flutter animated searchbar package
https://github.com/blackshadowsoftwareltd/animation_search_bar
dart flutter flutterpackage package plugins
Last synced: 5 months ago
JSON representation
Flutter animated searchbar package
- Host: GitHub
- URL: https://github.com/blackshadowsoftwareltd/animation_search_bar
- Owner: blackshadowsoftwareltd
- License: mit
- Created: 2022-02-19T05:51:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T12:34:32.000Z (almost 2 years ago)
- Last Synced: 2025-06-23T10:52:56.926Z (8 months ago)
- Topics: dart, flutter, flutterpackage, package, plugins
- Language: C++
- Homepage:
- Size: 168 KB
- Stars: 21
- Watchers: 1
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# animation_search_bar
A Customizable Animated Search Bar. It is suitable for the AppBar.
## Getting Started
### Simple use case
```dart
AnimationSearchBar(
backIconColor: Colors.black,
centerTitle: 'App Title',
onChanged: (text) => debugPrint(text),
searchTextEditingController: controller,
horizontalPadding: 5)
```
| Simple use case | Using all properties |
|:-------------:|:-------------:|
|  |  |
### All properties of this package
```dart
AnimationSearchBar(
///! Required
onChanged: (text) => debugPrint(text),
searchTextEditingController: controller,
///! Optional. For more customization
//? Back Button
backIcon: Icons.arrow_back_ios_new,
backIconColor: Colors.white,
isBackButtonVisible: true,
previousScreen: null, // It will push and replace this screen when pressing the back button
//? Close Button
closeIconColor: Colors.white,
//? Center Title
centerTitle: 'App Title',
hintText: 'Search here...',
centerTitleStyle: const TextStyle(
fontWeight: FontWeight.w500,color: Colors.white, fontSize: 20),
//? Search hint text
hintStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
//? Search Text
textStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
//? Cursor color
cursorColor: Colors.lightBlue.shade300,
//? Duration
duration: const Duration(milliseconds: 500),
//? Height, Width & Padding
searchFieldHeight: 35, // Total height of the search field
searchBarHeight: 50, // Total height of this Widget
searchBarWidth: MediaQuery.of(context).size.width - 20, // Total width of this Widget
horizontalPadding: 5,
verticalPadding: 0,
//? Search icon color
searchIconColor: Colors.white.withOpacity(.7),
//? Search field background decoration
searchFieldDecoration: BoxDecoration(
color: Colors.blueGrey.shade700,
border: Border.all(color: Colors.black.withOpacity(.2), width: .5),
borderRadius: BorderRadius.circular(15)),
)
```
#### Background Color
If you want to customize the background color. Please see the example where I decorate a Container for the search bar background. you can decorate as your wish.