Flutter 完美的验证码输入框（2 种方法）

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

以下是它的工作原理：

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

代码

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

// Create an input widget that takes only one digit

class OtpInput extends StatelessWidget {

final TextEditingController controller;

final bool autoFocus;

const OtpInput(this.controller, this.autoFocus, {Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return SizedBox(

height: 60,

width: 50,

child: TextField(

autofocus: autoFocus,

textAlign: TextAlign.center,

keyboardType: TextInputType.number,

controller: controller,

maxLength: 1,

cursorColor: Theme.of(context).primaryColor,

decoration: const InputDecoration(

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’ as math;

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’;

void main() {

setPathUrlStrategy();

runApp(MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

// Hide the d