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
points
1
downloads
Publisher
Weekly Downloads
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)
