animated_text_field 0.0.1+2 
animated_text_field: ^0.0.1+2 copied to clipboard
smkwinner.liveAnimated Text Custom Field which can be used to animate text field and errors by modifying the text field widget. It use custom fade animation from package [simple_animations](https://pub.dev/packages [...]
import 'package:animated_text_field/animated_text_field.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.blue,
backgroundColor: Colors.white,
),
scaffoldBackgroundColor: Colors.white),
home: const Example());
}
}
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final TextEditingController confirmPasswordController =
TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Login Example using Animated Text Field'),
),
body: Center(
child: SingleChildScrollView(
child: Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Login", style: TextStyle(fontSize: 40)),
const SizedBox(height: 20),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: SizedBox(
width: 300,
child: CustomTextField(
errorKey: 'email',
controller: emailController,
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.email),
hintText: "Enter your email",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
validator: (String? value) {
if (!value!.isEmail()) {
return "Invalid email";
}
return null;
},
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: SizedBox(
width: 300,
child: CustomTextField(
errorKey: 'password',
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.lock),
hintText: "Enter your password",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
validator: (String? value) {
if (value != null) {
if (!value.hasPasswordLength(length: 8)) {
return "Password must be at least 8 characters";
}
}
return null;
},
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: SizedBox(
width: 300,
child: CustomTextField(
errorKey: 'confirmPassword',
controller: confirmPasswordController,
keyboardType: TextInputType.visiblePassword,
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.lock),
hintText: "Confirm your password",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
validator: (String? value) {
if (value != passwordController.text) {
return 'Passwords do not match';
}
return null;
},
),
),
),
const SizedBox(height: 20),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: SizedBox(
width: 300,
child: CustomTextField(
errorKey: 'cardNumber',
keyboardType: TextInputType.number,
validator: (String? value) {
if (!value!.isCreditCard()) {
return "Invalid credit card number";
}
return null;
},
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.credit_card),
hintText: "Enter your credit card number",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
)),
),
const SizedBox(height: 20),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: SizedBox(
width: 300,
child: Row(
children: [
Flexible(
child: CustomTextField(
errorKey: 'expirationDate',
keyboardType: TextInputType.datetime,
validator: (String? value) {
if (!value!.isExpiryDate()) {
return "Invalid expiration date";
}
return null;
},
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.date_range),
hintText: "Expiration date",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
)),
const SizedBox(width: 10),
Flexible(
child: CustomTextField(
errorKey: 'cvv',
keyboardType: TextInputType.number,
validator: (String? value) {
if (!value!.isCvv()) {
return "Invalid CVV";
}
return null;
},
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.credit_card),
hintText: "CVV",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.grey,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Colors.blue,
width: 2,
),
),
),
))
],
),
),
),
const SizedBox(
height: 20,
),
MaterialButton(
color: Colors.blue,
height: 50,
onPressed: () {
if (formKey.currentState!.validate()) {
showDialog(
context: context,
builder: (builder) => AlertDialog(
title: const Text("Success"),
content: const Text(
"You have successfully logged in"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text("OK"))
],
));
}
},
child: const Text('Login'),
),
],
),
),
),
),
);
}
}Metadata
5
likes
140
pub points
64%
popularity
Publisher
Metadata
Animated Text Custom Field which can be used to animate text field and errors by modifying the text field widget. It use custom fade animation from package [simple_animations](https://pub.dev/packages/simple_animations) to animate the text field and errors and hide error after interval of time (default 10 seconds).
Homepage
Repository (GitHub)
View/report issues
Documentation
License
MIT (license)
