Good Search AppBar

A Flutter AppBar widget that smoothly animates between a title and a search text field. Supports multiple animation styles, an optional filter button, built-in debouncing, and full theming customisation.

---

Preview

---

Features

• 🔍 Animated transition between title and search field
• 🎨 Two built-in animation styles: Slide (default) and Fade + Scale
• 🔔 Built-in debounce — fires onSearchChanged only after the user stops typing
• 🎛️ Optional filter icon button with onFilterChanged callback
• 🖌️ Fully themeable: colours, icons, hint text, cursor colour, label style
• ✅ Null-safe, Dart 3 ready

---

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  good_search_appbar: ^0.0.5

Then run:

flutter pub get

---

Basic Usage

import 'package:good_search_appbar/good_search_appbar.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GoodSearchAppBar(
        title: 'Search',
        onSearchChanged: (query) {
          // Handle search query changes here.
          print(query);
        },
      ),
      body: const Center(child: Text('Search Page')),
    );
  }
}

---

Animation Styles

GoodSearchAppBar ships with two animation styles controlled by the animationStyle parameter.

SearchAnimationStyle.slide (default)

The title slides out to the left while the search field slides in from the right. The search/close icon slides vertically.

GoodSearchAppBar(
  title: 'Search',
  animationStyle: SearchAnimationStyle.slide, // default, can be omitted
  onSearchChanged: (query) {},
)

SearchAnimationStyle.fadeScale

Both the title and the search field fade and scale in/out for a softer, modern feel.

GoodSearchAppBar(
  title: 'Search',
  animationStyle: SearchAnimationStyle.fadeScale,
  onSearchChanged: (query) {},
)

---

Parameters

Parameter	Type	Default	Description
title	String	—	Required. Text shown in the AppBar when not in search mode.
onSearchChanged	Function(String)	—	Required. Called (debounced) whenever the search query changes. Receives an empty string when search is closed.
animationStyle	SearchAnimationStyle	slide	Animation style used when toggling between title and search field.
onFilterChanged	Function()?	null	Callback fired when the filter icon is tapped. Only visible when filter is true.
filter	bool?	false	Whether to show the filter icon button.
focus	bool?	true	Whether the search field should receive focus immediately when the widget is first built.
labelStyle	TextStyle?	null	Style applied to the title text. Falls back to headlineSmall with white colour.
hintText	String?	'Search...'	Placeholder text shown inside the search field.
hintStyle	TextStyle?	null	Style applied to the hint text.
cursorColor	Color?	null	Colour of the text cursor. Falls back to the primary theme colour.
searchIcon	Widget?	Icon(Icons.search)	Custom widget used as the search icon.
clearIcon	Widget?	Icon(Icons.close)	Custom widget used as the clear/close icon.
filterIcon	Widget?	Icon(Icons.filter_alt)	Custom widget used as the filter icon.
leading	bool	true	Whether to show the leading widget (e.g. back button).
leadingIcon	Widget?	null	Custom leading widget.
leadingWith	double?	null	Width of the leading widget area.
elevation	double?	null	Elevation of the AppBar.
backgroundColor	Color?	null	Background colour of the AppBar.
foregroundColor	Color?	null	Foreground colour (icons and text) of the AppBar.
centerTitle	bool?	true	Whether the title text is centred when not in search mode.

---

Issues & Suggestions

Found a bug or have a feature request? Please open an issue on GitHub.

---

Thank you for your support! ⭐