A custom animated search bar for Flutter apps
Flutter Animated Search Bar
This project showcases a custom animated search bar for Flutter apps, where a search icon expands into a text input field on being clicked.
Overview
The search bar begins as a simple circular icon. On tapping the icon, it smoothly transitions into a rectangular search bar where users can input text. When focus is removed from the input field, the search bar reverts back to the original icon, providing a slick and seamless user experience.
The animation is performed using Flutter’s AnimatedContainer widget, which provides a high level of customization and control over the animation’s duration and properties.
Features
- Smooth animations between search icon and input field
- Easy to integrate into existing Flutter projects
- Customizable look and feel with Flutter theming
How It Works
The main logic is encapsulated within the AnimatedSearchBar widget. This widget maintains a Boolean state to track whether the search bar is active or not.
- When the search bar is inactive (_isSearchActive = false), it displays an icon.
- When the user taps on the icon, the Boolean state is toggled, and the icon animates into a text input field.
- If the user removes focus from the field (by submitting their search or tapping elsewhere on the screen), the Boolean state is toggled again, and the search bar animates back into an icon.
All of these transitions are animated smoothly using the AnimatedContainer widget.
How To Use
To use this custom widget in your project, follow these steps:
- Clone this repository or copy the
animated_search_bar.dartfile into your project. - Import
animated_search_bar.dartin the file where you want to use the search bar. - Add the
AnimatedSearchBarwidget to your widget tree.
You can further customize the look and feel of the search bar by modifying properties such as colors, borderRadius, boxShadow, etc. within the AnimatedContainer widget.