Pub

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
  1. Import the package and use it in your Flutter App.
import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

Preview1

Preview2

‚ö†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 "Mouse" devices).

  • Change font style and color for text.

Support

You can support me by following me on and GitHub

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