SalehTZ/expandable_search_bar

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: ^latest_version

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

• [ ] Change font style and color for text.

Support

You can support me by following me on https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=instagram&logoColor=white and GitHub https://img.shields.io/github/followers/SalehTZ?logo=github&style=flat-square

And also don't forget to star this package on GitHub https://img.shields.io/github/stars/SalehTZ/expandable_search_bar?logo=github&style=flat-square