expandable_search_bar

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A visually appealing and animated search bar for Flutter, offering smooth transitions and high customizability. It enhances user experience with dynamic expansion and intuitive design, suitable for apps requiring an engaging search interface. The package supports multiple platforms and allows developers to tailor its appearance and behavior to match their app's theme.

Use cases

Enhancing mobile app search interfaces
Creating interactive web search experiences
Integrating animated search in desktop applications
Improving UX in e-commerce apps
Adding responsive search bars to dashboards

Key features

Smooth expandable animation
Highly customizable appearance
Cross-platform compatibility
Supports dark mode
Easy integration with existing UI
Configurable search triggers

Suitable for

Flutter developers building search-heavy apps
Design-focused UI/UX teams
Apps targeting multiple platforms
Developers seeking animated components
Projects requiring modern search bar aesthetics

Considerations

May require performance tuning on low-end devices
Custom styling can increase development time
Limited built-in search logic (external implementation needed)
Depends on Flutter's animation framework
Not optimized for very large datasets without additional handling

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Pub

Animated Search Bar

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

Installation

Add the latest version of package to your pubspec.yaml (and rundart 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';

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 and GitHub

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

Search packages, repositories and app categories

Install package