custom_animated_hint_textfield

The Custom Animated Hint TextField is a Flutter package that enhances text input fields with dynamic and visually appealing animations for hint texts. You can create unique animations like cyclic scrolling, sliding, scaling, fading, and more, while maintaining the flexibility to customize the design and behavior to suit your app’s needs.

Examples:

Features

• Animated Hint Text: Effortlessly add dynamic animated hints to your text field by providing a list (e.g., ["A", "B", "C", "D", "E"]) to the hints: parameter, enabling seamless animations that change dynamically.
• Multiple Animation Types: Includes cyclic scrolling, slide, scale, fade, and other animation effects for your hint text.
• Customizable Design: Customize the hint text style, animation duration, and other properties to match your app's design.
• Static and Animated Hints: Support for both static and animated hint text transitions.
• Cross-Platform Compatibility: Fully supports iOS, Android, and web platforms.

Installation

Add custom_animated_hint_textfield as a dependency in your pubspec.yaml file:

 
dependencies:
  custom_animated_hint_textfield: ^latest_version

Then, run flutter pub get to fetch the package.

Then, import it in your Dart file:

 
import 'package:custom_animated_hint_textfield/custom_animated_hint_textfield.dart';

Usage 1: "CircularAnimatedHintTextField"

The Custom Animated Hint TextField widget allows you to create a dynamic and visually appealing text input field with animated hints that guide the user. You can easily customize the hint text, animations, and styles to suit your app's design and functionality. Here's how you can use it:

CircularAnimatedHintTextField(
  // The prefix icon displayed on the left side of the text field. 
  // You can customize the icon and color to fit your design.
  prefixIcon: Icon(Icons.search_off_rounded, color: Colors.purple), 
  
  // The suffix icon displayed on the right side of the text field.
  // Similar to the prefix icon, you can change it based on your requirements.
  suffixIcon: Icon(Icons.access_time_filled, color: Colors.purple),

  // The static hint text that appears when the text field is empty.
  // This text can be customized to guide the user on what to input. 
  staticHintText: "Search food...",  // <-- Modify this to change the default hint text.
  
  // The style applied to the static hint text. 
  // This allows you to change the color, font size, and other text styling properties.
  staticHintTextStyle: TextStyle(color: Colors.grey, fontSize: 14),  // <-- Modify this for different text styles for the static hint.
  
  // A list of animated hint texts that will appear in sequence.
  // Customize these texts to provide more suggestions, like popular searches or categories.
  hints: [
    "Burger Delights 🍔",
    "Pizza Heaven 🍕",
    "Sweet Treats 🍰",
    "Noodles Galore 🍜",
    "Taco Time 🌯",
    "Fries Galore 🍟",
  ],
  
  // The style applied to the animated hint text.
  // This style is for the hint text shown when the user interacts with the text field.
  // Customize it for a bolder or different color/style for better visibility.
  animatedHintTextStyle: TextStyle(fontSize: 14, color: Colors.black, fontWeight: FontWeight.bold),
)

If you prefer not to use the static hint text, you can leave out the staticHintText and staticHintTextStyle properties. Only the animated hint text will be displayed, cycling through the values provided in the hints list.

Example:

CircularAnimatedHintTextField(
  // You can leave out static hint text if you don't want a default hint.
  // staticHintText: "Search food...",
  // staticHintTextStyle: const TextStyle(color: Colors.grey, fontSize: 14),
  prefixIcon: Icon(Icons.search_off_rounded, color: Colors.purple), 
  suffixIcon: Icon(Icons.access_time_filled, color: Colors.purple),
  hints: [
    "Spicy Dishes 🌶️",
    "Quick Meals 🍴",
    "Healthy Options 🥗",
    "Desserts 🍦",
    "Vegan Delights 🌱",
  ],
  animatedHintTextStyle: TextStyle(fontSize: 16, color: Colors.green, fontWeight: FontWeight.bold),
)

The animated hints will automatically cycle through the provided list of suggestions, providing a more dynamic search experience for your users.

Customization Options

• prefixIcon: Customize the icon on the left of the text field.
• suffixIcon: Customize the icon on the right of the text field.
• staticHintText: Set a static default hint text.
• staticHintTextStyle: Customize the style of the static hint text.
• hints: Provide a list of animated hint texts to display sequentially.
• animatedHintTextStyle: Set the style for the animated hint text that appears during user interaction.

Usage 2: "AnimatedHintTextField"

Type Of Animation:

  hintAnimationType: HintAnimationType.fade,
  hintAnimationType: HintAnimationType.slide,
  hintAnimationType: HintAnimationType.scale,
  hintAnimationType: HintAnimationType.slideFromTop,
  hintAnimationType: HintAnimationType.slideFromBottom,
  hintAnimationType: HintAnimationType.topToBottom,
  hintAnimationType: HintAnimationType.bottomToTop,

Here is an example usage of the Custom Animated Hint TextField widget:

Example [static text with animated hint]

AnimatedHintTextField(
  animateHintText: false,
  staticHintText: "Search... ",
  staticHintTextStyle: const TextStyle(fontSize: 14, color: Colors.grey),
  hints: const [
    'Quick Search 💡',
    'Explore More 🌍',
    'Find Your Favorite 🔍',
  ],
  fieldBackgroundColor: Colors.grey[200],
  animatedHintTextStyle: const TextStyle(fontSize: 16, color: Colors.black),
  hintSwitchDuration: const Duration(seconds: 2),
  hintAnimationType: HintAnimationType.fade,
),

Output:

Image that showcasing the Custom Animated Hint TextField in action:

Example [Animated hint without static Text]

// Fade Animation
AnimatedHintTextField(
 // animateHintText: false,
 // staticHintText: "Search... ",
 // staticHintTextStyle: const TextStyle(fontSize: 14, color: Colors.grey),
 hints: const [
     'Quick Search 💡',
     'Explore More 🌍',
     'Find Your Favorite 🔍',
   ],
 fieldBackgroundColor: Colors.grey[200],
 animatedHintTextStyle: const TextStyle(
       fontSize: 15,
       color: Colors.black,
       fontWeight: FontWeight.bold),
 hintSwitchDuration: const Duration(seconds: 2),
 hintAnimationType: HintAnimationType.fade,
)

Output:

Image that showcasing the Custom Animated Hint TextField in action:

Animation Types

• Cyclic Scrolling: The hint text scrolls cyclically, looping through the provided hints. [use CircularAnimatedHintTextField widget]
• Slide Animation: Hints slide in and out of the text field horizontally. [use AnimatedHintTextField widget]
• Scale Animation: The hint text scales in and out for a zoom effect. [use AnimatedHintTextField widget]
• Fade Animation: Hints fade in and out for a smooth transition effect. [use AnimatedHintTextField widget]
• Vertical Animations: Hints move vertically (top-to-bottom or bottom-to-top) through the text field. [use AnimatedHintTextField widget]

Customization

The package offers several properties for customization:

• Hint Style: Customize the static and animated hint text styles using hintStyleForStatic and hintStyleForAnimatedHint.
• Icons: Add prefixIcon and suffixIcon for additional functionality or aesthetics.
• Hint Transition Duration: Adjust the transition duration of hint text with hintChangeDuration.
• Auto Focus: Automatically focus the input field when initialized.
• Background Color: Set the background color of the text field.

Conclusion

The Custom Animated Hint TextField package allows you to add beautiful and dynamic hint text animations to your Flutter applications, creating an engaging user experience. With multiple animation types and full customization options, you can tailor the animations to suit your app’s style.

Feedback

If you encounter any issues or have suggestions, feel free to contribute or open an issue on the GitHub repository. Your feedback is highly appreciated!