animated_hint_textfield

Description:

animated hint textfield

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
copied to clipboard
2. Install it #
You can install packages from the command line:
with pub:
$ pub get
copied to clipboard
with Flutter:
$ flutter pub get
copied to clipboard
3. Import it #
Now in your Dart code, you can use:
import 'package:animated_hint_textfield/animated_hint_textfield.dart';
copied to clipboard

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"',
],
);
copied to clipboard
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"',
],
);
copied to clipboard
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),
),
);
copied to clipboard
Contributors #


Deekshith Shetty

Torregrossa François