Animated Search Bar

Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Installation

1. Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
  expandable_search_bar: ^0.0.1

2. Import the package and use it in your Flutter App.

import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

⚠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.

Example

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, ), ), ), ); } }

Next Goals

• Support mobile devices (Unfortunately it’s only available for “cursored” devices).
• Change font and color style for text.

Support

You can support me by following me on and GitHub

And also don’t forget to star this package on GitHub