animation_search_bar

Description:

animation search bar

animation_search_bar #
A Customizable Animated Search Bar. It is suitable for the AppBar.
Getting Started #
Simple use case #
AnimationSearchBar(
backIconColor: Colors.black,
centerTitle: 'App Title',
onChanged: (text) => debugPrint(text),
searchTextEditingController: controller,
horizontalPadding: 5)
copied to clipboard



Simple use case
Using all properties









All properties of this package #
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)),
)
copied to clipboard
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.