expandable_search_bar 0.0.1 copy "expandable_search_bar: ^0.0.1" to clipboard
expandable_search_bar: ^0.0.1 copied to clipboard

An animated flutter search bar package.

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

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