pin_code_fields
https://pub.flutter-io.cn/packages/pin_code_fields
可以输入漂亮的输入框，或者是验证码的漂亮样式
添加依赖：pin_code_fields: ^7.4.0
导入库：
import 'package:pin_code_fields/pin_code_fields.dart';
看起来还是不是很漂亮，更多功能的添加可以让页面更加的美观
PinCodeTextField(
appContext: context,//context
length: 5,//输入的长度
onChanged: (value) => print("onchange $value"),//变化回调
)
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutterpin_code_fields'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
// 情况列表
textEditingController.clear();
textEditingController.text = '123123123123'; //设置为自己需要的文本内容
}
//控制pintext 输入框的内容
TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Form(
child: PinCodeTextField(
// backgroundColor:
// Color.fromARGB(255, 2, 204, 157), //输入框的背景颜色
cursorColor: Colors.teal, //光标颜色
useHapticFeedback: true,
hapticFeedbackTypes: HapticFeedbackTypes.heavy,
boxShadows: const [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 10,
color: Colors.redAccent,
)
], //输入框内容阴影
controller: textEditingController, //控制器，可以情况已写入的文本，填入你需要的文本
obscureText: true, //是否是秘密，需要遮盖
obscuringWidget: const Icon(Icons.safety_check), //遮盖的widget
blinkWhenObscuring:
true, //是否需要眨眼特效在遮盖的过程中，遮盖过程密码可见到不可见的一个过程
blinkDuration: const Duration(microseconds: 200), //眨眼动画效果时间
inputFormatters: [
// 表示只能输入字母大写小写都可以
FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
], //输入的校验
dialogConfig:
DialogConfig(dialogTitle: 'sure pasted'), //粘贴确认的弹窗
onCompleted: (value) {
print('oncompletd $value');
},
// animationCurve: Curves.bounceInOut, //动画的效果
// animationType: AnimationType.fade,//动画的类型
textInputAction:
TextInputAction.done, //右下角的按键功能，是完成，可以选择其他的
appContext: context,
length: 5,
onChanged: (value) => print("onchange $value"),
//上面的配置完成之后，其实也还很不美观的，那主要的ui 功能设置可以在pinTheme 里面完成
pinTheme: PinTheme(
shape: PinCodeFieldShape.box, //输入框的形状
borderRadius: const BorderRadius.all(Radius.circular(10)),
// 其他可以设置可以自己参考，比如有输入文字的时候输入框是什么颜色，不能输入的时候是什么颜色等
)),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
textEditingController.clear();
},
child: const Text('清空')),
ElevatedButton(
onPressed: () {
textEditingController.text =
'123123123123'; //设置为自己需要的文本内容
},
child: const Text('设置文本'))
],
)
],
),
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
有一部分功能是同 TextFormField 的。有一部分需要特殊说明下，方便以后的时候：
如下
textInputAction:
TextInputAction.done, //右下角的按键功能，是完成，可以选择其他的
相关功能可以具体参考这个文章：【Flutter】【widget】TextField 和CupertinoTextField 输入框
inputFormatters: [
//允许 ,如下只允许输入0-9的数字，可以匹配正则表达式
// FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))
//禁止输入字母
// FilteringTextInputFormatter.deny(RegExp(r'"[a-zA-Z]"')) //禁止
//FilteringTextInputFormatter.deny("zzz") //禁止输入zzz
//LengthLimitingTextInputFormatter(6), 长度的限制
], //输入的校验
当出现错误的时候就会出现自己设置的动效，比如当输入的长度不够，就提交，就可以控制他出现一个摇动输入框的情况出现
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutterpin_code_fields'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
// 情况列表
textEditingController.clear();
textEditingController.text = '123123123123'; //设置为自己需要的文本内容
}
//控制pintext 输入框的内容
TextEditingController textEditingController = TextEditingController();
late StreamController<ErrorAnimationType> errorController;
@override
void initState() {
// TODO: implement initState
super.initState();
errorController = StreamController<ErrorAnimationType>();
}
final formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Form(
child: PinCodeTextField(
// backgroundColor:
// Color.fromARGB(255, 2, 204, 157), //输入框的背景颜色
cursorColor: Colors.teal, //光标颜色
boxShadows: const [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 10,
color: Colors.redAccent,
)
], //输入框内容阴影
controller: textEditingController, //控制器，可以情况已写入的文本，填入你需要的文本
errorAnimationController: errorController,
onCompleted: (value) {
print('oncompletd $value');
},
// animationCurve: Curves.bounceInOut, //动画的效果
// animationType: AnimationType.fade,//动画的类型
textInputAction:
TextInputAction.done, //右下角的按键功能，是完成，可以选择其他的
appContext: context,
length: 5,
onChanged: (value) => print("onchange $value"),
//上面的配置完成之后，其实也还很不美观的，那主要的ui 功能设置可以在pinTheme 里面完成
pinTheme: PinTheme(
shape: PinCodeFieldShape.box, //输入框的形状
borderRadius: const BorderRadius.all(Radius.circular(10)),
// 其他可以设置可以自己参考，比如有输入文字的时候输入框是什么颜色，不能输入的时候是什么颜色等
)),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
textEditingController.clear();
},
child: const Text('清空')),
ElevatedButton(
onPressed: () {
// formKey.currentState!.validate();
if (textEditingController.text.length < 6) {
print('这边出现错误了。就会摇动输入框');
errorController.add(ErrorAnimationType.shake);
}
},
child: const Text('提交'))
],
)
],
),
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
路由具体到pub 里面查看：https://pub.flutter-io.cn/packages/pin_code_fields
代码如下（示例）：
import 'package:flutter/material.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutterpin_code_fields'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
// 情况列表
textEditingController.clear();
textEditingController.text = '123123123123'; //设置为自己需要的文本内容
}
//控制pintext 输入框的内容
TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Form(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PinCodeTextField(
controller: textEditingController,
appContext: context,
length: 5,
obscureText: true, //是否需要覆盖。比如密码输入的时候
backgroundColor: Colors.white, //整个控件的背景颜色
useHapticFeedback: true, //使用振动反馈
hapticFeedbackTypes: HapticFeedbackTypes.heavy,
obscuringCharacter: "*", //覆盖的字符
onChanged: (value) => print('$value'),
onCompleted: (value) => print('completed$value'),
pinTheme: PinTheme(
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth: 40,
activeFillColor: Colors.pinkAccent,
), //主题
//输入框内的阴影
boxShadows: const [
BoxShadow(
offset: Offset(0, 1),
color: Colors.greenAccent,
blurRadius: 7,
)
],
// 设置输入的类型，比如纯数字或者是email地址等
keyboardType: TextInputType.number,
),
),
),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
当有验证码输入等需求的时候，可以制作漂亮的输入框，并针对一些情况进行处理，（其中也有对应震动的处理，该文章还未给出，可以自行尝试）