【Flutter】【package】pin_code_fields 漂亮的验证码输入框

---

前言

pin_code_fields
https://pub.flutter-io.cn/packages/pin_code_fields

---

一、pin_code_fields 是什么？

可以输入漂亮的输入框，或者是验证码的漂亮样式

二、使用步骤

1.引入库

添加依赖：pin_code_fields: ^7.4.0
导入库：

import 'package:pin_code_fields/pin_code_fields.dart';

2.使用

1.基础功能

看起来还是不是很漂亮，更多功能的添加可以让页面更加的美观

	 PinCodeTextField(
	    appContext: context,//context
	    length: 5,//输入的长度
	    onChanged: (value) => print("onchange $value"),//变化回调
	  )

2.基础参数功能解析

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.
    );
  }
}

3.部分功能的特殊说明

有一部分功能是同 TextFormField 的。有一部分需要特殊说明下，方便以后的时候：
如下

1.键盘右下角的功能按键样式

textInputAction:
                TextInputAction.done, //右下角的按键功能，是完成，可以选择其他的

2.inputFormatters 输入内容的检验和限制

相关功能可以具体参考这个文章：【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), 长度的限制


], //输入的校验

3.错误动效

当出现错误的时候就会出现自己设置的动效，比如当输入的长度不够，就提交，就可以控制他出现一个摇动输入框的情况出现

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.
    );
  }
}

4.官方用例

路由具体到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.
    );
  }
}

---

总结

当有验证码输入等需求的时候，可以制作漂亮的输入框，并针对一些情况进行处理，（其中也有对应震动的处理，该文章还未给出，可以自行尝试）