animated_hint_textfield 1.0.3 copy "animated_hint_textfield: ^1.0.3" to clipboard
animated_hint_textfield: ^1.0.3 copied to clipboard

Flutter package for animating textfield hint/label text, adding dynamic and eye-catching transitions to enhance user experience.

pub package pub points

Animated Hint TextField

A Flutter package designed to animate the label/hint text of a textfield, providing suggestive guidance to the user regarding what to input. Try out our example app.


Platform Support #

Android iOS MacOS Web Linux Windows



Installing #

1. Depend on it #

Add this to your package's pubspec.yaml file:

dependencies:
  animated_hint_textfield: ^1.0.0

2. Install it #

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter pub get

3. Import it #

Now in your Dart code, you can use:

import 'package:animated_hint_textfield/animated_hint_textfield.dart';



Animations #

Currently this package supports 3 animations, more animations will be added in the future.

Slide #

AnimatedTextField(
  animationType: Animationtype.slide, // Use Animationtype.slide for Slide animations
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2,
      ),
      borderRadius: BorderRadius.circular(4),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 2,
      ),
      borderRadius: BorderRadius.circular(4),
    ),
    contentPadding: EdgeInsets.all(12),
  ),
  hintTexts: [
    'Search for "Bengaluru"',
    'Search for "Mumbai"',
    'Search for "Chennai"',
  ],
);

Fade #

AnimatedTextField(
  animationType: Animationtype.fade, // Use Animationtype.fade for Fade animations
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2,
      ),
      borderRadius: BorderRadius.circular(4),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 2,
      ),
      borderRadius: BorderRadius.circular(4),
    ),
    contentPadding: EdgeInsets.all(12),
  ),
  hintTexts: [
    'Search for "Bengaluru"',
    'Search for "Mumbai"',
    'Search for "Chennai"',
  ],
);

Typer #

AnimatedTextField(
  animationType: Animationtype.typer, // Use Animationtype.typer for Type Write Style animations
  hintTextStyle: const TextStyle(
    color: Colors.deepPurple,
    overflow: TextOverflow.ellipsis,
  ),
  hintTexts: const [
    'How is the weather today?',
    'Will it rain today?',
    'What is the temperature',
  ],
  decoration: InputDecoration(
    suffixIcon: const Icon(Icons.search),
    filled: true,
    border: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(25),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.black, width: 2),
      borderRadius: BorderRadius.circular(25),
    ),
    contentPadding: const EdgeInsets.all(12),
  ),
);

Contributors #


Deekshith Shetty

Torregrossa François
55
likes
160
pub points
87%
popularity

Publisher

verified publishertechnexi.com

Flutter package for animating textfield hint/label text, adding dynamic and eye-catching transitions to enhance user experience.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

animated_text_kit, flutter

More

Packages that depend on animated_hint_textfield