Flutter动画文本输入插件animated_text_field的使用
Flutter 动画文本输入插件 animated_text_field 的使用
特性
- 简单处理错误信息
- 简单处理文本字段
- 移除冗余代码
- 字符串扩展方法以首字母大写字符串
- 预置了一些验证规则
- 邮箱
- 密码
- 电话号码
- URL
- 信用卡
- 支持以下卡类型
- Visa
- MasterCard
- American Express
- Diners Club
- Discover
- JCB
- UnionPay
- Maestro
- Mir
- Forbrugsforeningen
- Dankort
- Laser
- InstaPayment
- Switch
- RuPay
- 支持以下卡类型
- CVV
- 日期
- 时间
- IP 地址
- IPv4 地址
- IPv6 地址
- JSON
- 密码
- 护照号码
- 纬度
- 经度
开始使用
添加依赖
在 pubspec.yaml 文件中添加依赖项：
dependencies:
animated_text_field:
对于最新版本，请查看 animated_text_field。
导入包
在你的 Dart 文件中导入 animated_text_field 包：
import 'package:animated_text_field/animated_text_field.dart';
使用控件
以下是一个简单的使用示例：
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('登录示例使用动画文本字段'),
),
body: Center(
child: SingleChildScrollView(
child: Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("登录", 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: "请输入您的邮箱",
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 "无效的邮箱";
}
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: "请输入您的密码",
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 "密码必须至少8个字符";
}
}
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: "确认您的密码",
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 '两次输入的密码不一致';
}
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 "无效的信用卡号";
}
return null;
},
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.credit_card),
hintText: "请输入您的信用卡号",
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 "无效的过期日期";
}
return null;
},
decoration: CustomTextInputDecoration(
prefixIcon: const Icon(Icons.date_range),
hintText: "过期日期",
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 "无效的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: (context) => AlertDialog(
title: const Text("成功"),
content: const Text("您已成功登录"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text("确定"),
)
],
),
);
}
},
child: const Text('登录'),
),
],
),
),
),
),
);
}
}
输出
使用说明
打开代码文件夹 example 在代码编辑器中（如 VS Code 或 Android Studio）。
在终端中运行以下命令：
flutter run -d chrome
更多关于Flutter动画文本输入插件animated_text_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter动画文本输入插件animated_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
animated_text_field 是一个 Flutter 插件，用于在文本输入时添加动画效果。这个插件可以让文本输入框在用户输入时显示各种动画效果，例如字符逐个出现、淡入淡出等。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 animated_text_field 插件的依赖：
dependencies:
flutter:
sdk: flutter
animated_text_field: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装插件。
使用示例
下面是一个简单的示例，展示如何使用 animated_text_field 插件：
import 'package:flutter/material.dart';
import 'package:animated_text_field/animated_text_field.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Animated Text Field Example'),
),
body: Center(
child: AnimatedTextField(
hintText: 'Enter your text',
animationType: TextAnimationType.fadeIn, // 选择动画类型
duration: Duration(milliseconds: 500), // 动画持续时间
textStyle: TextStyle(fontSize: 18), // 文本样式
onChanged: (value) {
print('Text changed: $value');
},
),
),
),
);
}
}
参数说明
hintText: 输入框的提示文本。animationType: 动画类型，可以是TextAnimationType.fadeIn、TextAnimationType.slideIn等。duration: 动画的持续时间。textStyle: 文本的样式。onChanged: 当文本发生变化时的回调函数。
支持的其他功能
controller: 你可以使用TextEditingController来控制文本输入。decoration: 自定义输入框的装饰，例如边框、背景颜色等。keyboardType: 指定键盘类型，例如TextInputType.emailAddress。obscureText: 是否隐藏输入内容（用于密码输入）。
自定义动画
如果你想要更复杂的动画效果，可以通过继承 TextAnimation 类来实现自定义动画。
class CustomAnimation extends TextAnimation {
@override
Widget build(BuildContext context, String text, TextStyle textStyle) {
return Text(
text,
style: textStyle,
// 自定义动画效果
);
}
}
然后在 AnimatedTextField 中使用：
AnimatedTextField(
hintText: 'Enter your text',
animationType: CustomAnimation(), // 使用自定义动画
duration: Duration(milliseconds: 500),
textStyle: TextStyle(fontSize: 18),
onChanged: (value) {
print('Text changed: $value');
},
);