Search packages, repositories and app categories

GitHub repositoryLzyct/animated_search_bar

animated_search_bar

This is Flutter Plugin to create Simple and Beautiful Searchbar with Animation

animated_search_bar project cover
Stars
12
Forks
9
Last push (UTC)
Jan 5, 2025
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

AnimatedSearchBar pub package License: MIT Build Status

A Beautiful and Simple SearchBar widget with animation transition. It can be fully customized with label, labelStyle, searchDecoration, etc. It also maintains onChange state. Animated Searchbar Demo

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

... animated_search_bar: "^latest_version"

Usage Examples

import 'package:animated_search_bar/animated_search_bar.dart';


String searchText="";

AnimatedSearchBar(
  label: "Search Something Here",
  onChanged: (value) {
    debugPrint("value on Change");
    setState(() {
      searchText = value;
    });
  },
),

Available Parameters

Param isRequired
String label No
Function(String) onChanged No
TextStyle labelStyle No
Alignment labelAlignment No
TextAlign labelTextAlign No
InputDecoration searchDecoration No
int animationDuration in milliseconds No
TextStyle searchStyle No
Color cursorColor No
Duration duration , debouncer duration default 300ms No
double height , default 60 No
Widget closeIcon , default const Icon(Icons.close, key: ValueKey("close")) No
Widget searchIcon , default const Icon(Icons.search, key: ValueKey("search")) No
TextEditingController controller No
Function(String) onFieldSubmitted No
TextInputAction textInputAction default TextInputAction.search No
bool autoFocus *default false No

Buy me coffee if you love my works ☕️

ko-fi      buymeacoffe      paypal



Mudassir GitHub avatar
GitHub author

Mudassir ↗

⌜Remote worker 💼 ✖︎ Code Geek 👨‍💻 ✖︎ Mobile Developer Expert 📱 ✖︎ Tech Enthusiast 🔥⌟

@airasiaMakassarOfficial website ↗
LanguagesDartRubySwiftKotlinObjective-C

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗