A customizable search bar with speech recognition and dynamic hint text animations for Flutter.


  • Dynamic Hint Text Animations: Animated hint text changes periodically to provide suggestions to the user.
  • Speech Recognition: Users can search by speaking, thanks to the integrated speech-to-text functionality.
  • Customizable: Various parameters to customize the appearance and behavior of the search bar.


Check out the video demo to see animated_hint_searchbar in action:



Add the dependency to your pubspec.yaml file:

  animated_hint_searchbar: ^1.0.2

Import the package

import 'package:animated_hint_searchbar/animated_hint_searchbar.dart';


Here is an example of how to use the animated_hint_searchbar widget:

import 'package:animated_hint_searchbar/animated_hint_searchbar.dart';
import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SearchExample(),

class SearchExample extends StatefulWidget {
  _SearchExampleState createState() => _SearchExampleState();

class _SearchExampleState extends State<SearchExample> {
  final TextEditingController _textEditingController = TextEditingController();

  void dispose() {

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfffffcf3),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(10, 90, 10, 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
              'Animated Searchbar',
              style: TextStyle(
                color: Color(0xff6f6d5f),
                fontWeight: FontWeight.bold,
                fontSize: 22,
                fontFamily: 'Roboto',
              height: 40,
              padding: const EdgeInsets.all(5.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                    textEditingController: _textEditingController,
                    micEnabled: true,
                    onSearchPressed: () {},
                    cursorColor: Colors.white,
                        TextStyle(color: Color(0xff6f6d5f), fontSize: 20),
                    opacity: 0.5,
                    fontFamily: 'Roboto',
                    textColor: Color(0xff6f6d5f),
                    containerColor: const Color(0xffebe8d6),
                    verticalDivider_color: Color(0xff6f6d5f),
                    micIconColor: Color(0xff6f6d5f),
                    searchIconColor: Color(0xff6f6d5f),
                    height: 50,
                    width: 390,

Customizable Parameters

Required Parameters

  • textEditingController (TextEditingController): Controller for managing the text being edited. Required to handle text input.
  • micEnabled (bool): Flag to enable or disable the microphone button. Required to indicate mic availability.
  • onSearchPressed (VoidCallback?): Callback function when the search icon is pressed. Required to define search action.

Optional Parameters

  • searchIcon (IconData): Icon for the search button. Defaults to
  • hintTexts (List
  • animationDuration (Duration): Duration of the hint text animation. Controls how fast the hints change. Defaults to Duration(seconds: 2).
  • hintStyle (TextStyle?): Style of the hint text. Customizes the appearance of the hint text.
  • searchIconColor (Color): Color of the search icon. Matches the search bar with your app's theme. Defaults to Colors.grey.
  • micIconColor (Color): Color of the microphone icon when inactive. Indicates the state of the mic. Defaults to Colors.grey.
  • micIconActiveColor (Color): Color of the microphone icon when active. Indicates when the mic is recording. Defaults to
  • containerColor (Color): Background color of the search bar. Integrates the search bar with your app's design. Defaults to Colors.white.
  • boxShadow (BoxShadow?): Shadow effect for the search bar container. Adds depth to the search bar UI.
  • borderRadius (BorderRadius?): Radius for the search bar container. Adds more layers to the search bar UI.
  • height (double): Height of the search bar. Allows customization of the search bar size. Defaults to 50.
  • width (double?): Width of the search bar. Allows customization of the search bar size.
  • cursorColor (Color): Color of the text cursor. Defaults to
  • opacity (double): Opacity of the search bar background. Defaults to 0.7.
  • fontFamily (String): Font family for the text. Defaults to Mukti.
  • textColor (Color): Color of the search text. Defaults to
  • verticalDivider_color (Color): Color of the vertical divider between the text field and the microphone icon. Defaults to

By using these parameters, you can customize the appearance and behavior of the Animated_hint_searchbar to match your app's design and functionality requirements.


Developed by Aryan Surve ( and Aditi Gaikwad ( Drop a like if you enjoy using this package!