Flutter验证码输入框的实现方法有哪些(flutter,开发技术)

重点是什么？

真实世界的 完美的验证码输入框或 PIN 输入 UI 通常满足以下最低要求：

• 有4个或6个文本域，每个文本域只能接受1个字符（通常是一个数字）

• 输入数字后自动聚焦下一个字段

您经常在需要电话号码确认、电子邮件或双因素身份验证的应用程序中看到此功能。

从头开始制作 OTP 字段

应用预览

此示例创建一个简单的 OTP 屏幕。首先，聚焦第一个输入字段。当您输入一个数字时，光标将自动移动到下一个字段。当按下提交按钮时，您输入的 OTP 代码将显示在屏幕上。

以下是它的工作原理：

测试此应用程序时，您应该使用模拟器的软键盘而不是计算机的硬件键盘。

代码

创建一个名为OtpInput的可重用小部件：

//CreateaninputwidgetthattakesonlyonedigitclassOtpInputextendsStatelessWidget{finalTextEditingControllercontroller;finalboolautoFocus;constOtpInput(this.controller,this.autoFocus,{Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnSizedBox(height:60,width:50,child:TextField(autofocus:autoFocus,textAlign:TextAlign.center,keyboardType:TextInputType.number,controller:controller,maxLength:1,cursorColor:Theme.of(context).primaryColor,decoration:constInputDecoration(border:OutlineInputBorder(),counterText:'',hintStyle:TextStyle(color:Colors.black,fontSize:20.0)),onChanged:(value){if(value.length==1){FocusScope.of(context).nextFocus();}},),);}}

main.dart 中的完整源代码和解释（我将OtpInput类放在文件底部）：

import'dart:math'asmath;import'package:flutter/cupertino.dart';import'package:flutter/material.dart';import'package:async/async.dart';import'package:flutter/scheduler.dart';import'package:url_strategy/url_strategy.dart';voidmain(){setPathUrlStrategy();runApp(MyApp());}classMyAppextendsStatelessWidget{constMyApp({Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(//HidethedebugbannerdebugShowCheckedModeBanner:false,title:'坚果',theme:ThemeData(primarySwatch:Colors.indigo,),home:constHomeScreen(),);}}classHomeScreenextendsStatefulWidget{constHomeScreen({Key?key}):super(key:key);@overrideState<HomeScreen>createState()=>_HomeScreenState();}class_HomeScreenStateextendsState<HomeScreen>{String_imageUrl='https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png';double_fontSize=20;String_title="坚果公众号";//4texteditingcontrollersthatassociatewiththe4inputfieldsfinalTextEditingController_fieldOne=TextEditingController();finalTextEditingController_fieldTwo=TextEditingController();finalTextEditingController_fieldThree=TextEditingController();finalTextEditingController_fieldFour=TextEditingController();//Thisistheenteredcode//ItwillbedisplayedinaTextwidgetString?_otp;@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(_title),),body:Column(mainAxisAlignment:MainAxisAlignment.center,children:[constText('请输入验证码'),constSizedBox(height:30,),//Implement4inputfieldsRow(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[OtpInput(_fieldOne,true),OtpInput(_fieldTwo,false),OtpInput(_fieldThree,false),OtpInput(_fieldFour,false)],),constSizedBox(height:30,),ElevatedButton(onPressed:(){setState((){_otp=_fieldOne.text+_fieldTwo.text+_fieldThree.text+_fieldFour.text;});},child:constText('提交')),constSizedBox(height:30,),//DisplaytheenteredOTPcodeText(_otp??'验证码',style:constTextStyle(fontSize:30),)],),);}}//CreateaninputwidgetthattakesonlyonedigitclassOtpInputextendsStatelessWidget{finalTextEditingControllercontroller;finalboolautoFocus;constOtpInput(this.controller,this.autoFocus,{Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnSizedBox(height:60,width:50,child:TextField(autofocus:autoFocus,textAlign:TextAlign.center,keyboardType:TextInputType.number,controller:controller,maxLength:1,cursorColor:Theme.of(context).primaryColor,decoration:constInputDecoration(border:OutlineInputBorder(),counterText:'',hintStyle:TextStyle(color:Colors.black,fontSize:20.0)),onChanged:(value){if(value.length==1){FocusScope.of(context).nextFocus();}},),);}}

使用第三个包

为了仅用几行代码快速实现您的目标，您可以使用第三方插件。在我们的例子中一些好的是pin_code_fields，otp_text_field等。 下面的例子将使用pin_code_fileds，它提供了很多很棒的功能：

• 自动将下一个字段集中在打字上，将上一个字段集中在委派上

• 可以设置为任意长度

• 高度可定制

• 输入文本的 3 种不同类型的动画

• 动画活动、非活动、选定和禁用字段颜色切换

• 自动对焦选项

• 从剪贴板粘贴 OTP 代码

您还可以在终端窗口中看到您输入的字符：

代码

1.安装插件：

flutterpubaddpin_code_fields

2.最终代码：

import'dart:math'asmath;import'package:flutter/cupertino.dart';import'package:flutter/material.dart';import'package:async/async.dart';import'package:pin_code_fields/pin_code_fields.dart';import'package:url_strategy/url_strategy.dart';voidmain(){setPathUrlStrategy();runApp(MyApp());}classMyAppextendsStatelessWidget{constMyApp({Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(//HidethedebugbannerdebugShowCheckedModeBanner:false,title:'坚果',theme:ThemeData(primarySwatch:Colors.indigo,),home:constHomeScreen(),);}}classHomeScreenextendsStatefulWidget{constHomeScreen({Key?key}):super(key:key);@overrideState<HomeScreen>createState()=>_HomeScreenState();}class_HomeScreenStateextendsState<HomeScreen>{String_imageUrl='https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png';double_fontSize=20;String_title="坚果公众号";//4texteditingcontrollersthatassociatewiththe4inputfieldsTextEditingControllertextEditingController=TextEditingController();StringcurrentText="";@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(_title),),body:Padding(padding:constEdgeInsets.all(30),child:Center(child:PinCodeTextField(length:6,obscureText:false,animationType:AnimationType.fade,pinTheme:PinTheme(shape:PinCodeFieldShape.box,borderRadius:BorderRadius.circular(5),fieldHeight:50,fieldWidth:40,activeFillColor:Colors.white,),animationDuration:constDuration(milliseconds:300),backgroundColor:Colors.blue.shade50,enableActiveFill:true,controller:textEditingController,onCompleted:(v){debugPrint("Completed");},onChanged:(value){debugPrint(value);setState((){currentText=value;});},beforeTextPaste:(text){returntrue;},appContext:context,),),),);}}