A Customizable Animated Search Bar. It is suitable for the AppBar.
AnimationSearchBar
(
backIconColor: Colors.black,
title:Text('Animation Search Bar',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
onChanged: (text) => debugPrint(text),
)
Simple use case | Using all properties |
---|---|
![]() |
![]() |
AnimationSearchBar
(
padding: const EdgeInsets.symmetric(horizontal: 5),
iconsColor: Colors.white,
hintStyle: const TextStyle(
color: Colors.white,
),
title: const Row(
children: [
Icon(
Icons.waving_hand_sharp,
color: Colors.white,
),
SizedBox(
width: 4,
),
Text('Animation Search Bar',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
],
),
onChanged: (text) {},
)
,
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.