Animated Search Bar package lets you add a beautiful search bar to your Flutter app.
- Add the latest version of package to your pubspec.yaml (and run
dart pub get):
dependencies:
expandable_search_bar: ^latest_version- Import the package and use it in your Flutter App.
import 'package:expandable_search_bar/expandable_search_bar.dart';|
|
|
⚠Note: As you see in the screenshots this package is only available on Mouse devices (Web, Windows, macOS, Linux), but I'm working on a solution to add mobile devices too.
There are a number of properties that you can modify. Customize them as you want:
- width
- text
- gutter (space between TextField and Button)
- background color
- icon color
- icon background color
- shadow under the bar
- shadow under the button
- animation duration (also for TextField)
- animation curve (also for TextField)
class AnimatedBar extends StatelessWidget {
const AnimatedBar({
Key? key,
}) : super(key: key);
final TextEditingController? searchController
= TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: const AnimatedSearchBar(
ExpandableSearchBar(
onTap: () {
print(
searchController!.text.toString(),
);
},
hintText: "search something",
editTextController: searchController,
),
),
),
);
}
} |
|
-
Support mobile devices (Unfortunately it's only available for "Mouse" devices).
-
Change font style and color for text.
You can support me by following me on 
And also don't forget to star this package on GitHub
