animated_custom_hint_textfield 0.0.1

A Flutter package for creating fully customizable animated hint TextFields with diverse animations for enhanced UI and user engagement.

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, all while maintaining the flexibility to customize the design and behavior to suit your app’s needs.

Features

• Animated Hint Text: Easily add animated hints that change dynamically within the text field.
• 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: ^1.0.0 
 

Then, run flutter pub get to fetch the package.

Usage

To use the Custom Animated Hint TextField widget in your app, simply add it to your widget tree with the desired animation types and customization options. Here's an example:

 
 
AnimatedHintTextField( 
  hints: ["Find your favorite 🍕", "Search now 🔍"], 
  hintAnimationType: HintAnimationType.fade, 
  hintChangeDuration: Duration(seconds: 2), 
  backgroundColor: Colors.grey[200], 
); 
 

Animation Types

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

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.

Example

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

 
 
AnimatedHintTextField( 
  hints: ["Find your favorite 🍕", "Search now 🔍"], 
  hintAnimationType: HintAnimationType.fade, 
  hintChangeDuration: Duration(seconds: 2), 
  backgroundColor: Colors.grey[200], 
); 
 

Images

Here are some images showcasing the Custom Animated Hint TextField in action:

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!