searchable_appbar #

Pub.dev	License	Platform

A highly customizable Flutter AppBar widget with built-in, animated search functionality, automatic theme awareness, notification badges, and avatar support. Simplify your application header implementation with rich features out of the box.

Features #

The searchable_appbar is a modern replacement for Flutter's default AppBar, with enhanced mobile UI features:

• Integrated Search: Smooth title-to-search transition with cubic animation.

• Live Filtering: onChanged & onSearch callbacks for real-time list updates.

• Theme Aware: Auto adjusts text/icon color for light or dark backgrounds.

• Notification Badge: Displays dynamic counts on action icons.

• Profile/Avatar: Custom widget support for profile or avatar display.

• Custom Layout: Full control of toolbarHeight, bottom widget, bottomShape, and titleAlignment.

Getting started #

Installation #

pubspec.yaml #

searchable_appbar: <lastest version>

2.  Run flutter pub get in your terminal.

Prerequisites #

• Flutter SDK: >=3.0.0
• Dart SDK: >=2.18.0

Import #

import 'package:searchable_appbar/searchable_appbar.dart';

Usage 💻 #

1. Basic AppBar with Title #

SearchableAppbar(
  title: "Dashboard", // AppBar title
  backgroundColor: Colors.blue, // Background color of the AppBar
)

2. AppBar with Leading Icon #

SearchableAppbar(
  title: "Dashboard", // AppBar title
  leadingIcon: Icons.menu, // Leading icon (usually for drawer or back)
  onLeadingPressed: () {
    print("Menu pressed"); // Action when leading icon is pressed
  },
)

3. AppBar with Search #

SearchableAppbar(
  title: "Search Example",
  onSearch: (query) => print("Search submitted: $query"),
  onChanged: (query) => print("Search changed: $query"),
  hintText: "Type something...",
  keepSearchOpenAfterSubmit: true,
)

4. AppBar with Notification Badge #

SearchableAppbar(
  title: "Notifications", // AppBar title
  notificationCount: 7, // Display badge with count
  actionIconColor: Colors.white, // Color of action icons (like notifications)
)

5. AppBar with TabBar & Curved Bottom #

TabController _tabController = TabController(length: 3, vsync: this); 
// TabController to control TabBar tabs

SearchableAppbar(
  title: "Dashboard", // AppBar title
  backgroundColor: Colors.blue, // AppBar color
  bottom: TabBar(
    controller: _tabController, // Connect TabBar with TabController
    tabs: const [
      Tab(text: 'Home'), // Tab 1
      Tab(text: 'Profile'), // Tab 2
      Tab(text: 'Settings'), // Tab 3
    ],
    indicator: BoxDecoration(
      color: Colors.white.withOpacity(0.3), // Indicator color
      borderRadius: BorderRadius.circular(12), // Rounded corners for indicator
    ),
    labelColor: Colors.white, // Selected tab text color
    unselectedLabelColor: Colors.white70, // Unselected tab text color
  ),
  bottomShape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(16), // Curved bottom of AppBar
    ),
  ),
)

Properties Reference

Additional Information ℹ️ #

Reporting Issues #

If you encounter any bugs or have feature requests, please feel free to file an issue on the GitHub repository.

Contributing #

Contributions are always welcome! You can fork the repository, make your improvements, and submit a pull request. Let’s make this package better together.

Version History #

For a complete history of changes, bug fixes, and updates, please refer to the CHANGELOG.md file included in this repository.