《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
完整开源地址:https://docs.qq.com/doc/DSkNLaERkbnFoS0ZF
);
}
}
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 debug banner
debugShowCheckedModeBanner: false,
title: ‘坚果’,
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
String _imageUrl =
‘https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png’;
double _fontSize = 20;
String _title = “坚果公众号”;
// 4 text editing controllers that associate with the 4 input fields
final TextEditingController _fieldOne = TextEditingController();
final TextEditingController _fieldTwo = TextEditingController();
final TextEditingController _fieldThree = TextEditingController();
final TextEditingController _fieldFour = TextEditingController();
// This is the entered code
// It will be displayed in a Text widget
String? _otp;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(‘请输入验证码’),
const SizedBox(
height: 30,
),
// Implement 4 input fields
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OtpInput(_fieldOne, true),
OtpInput(_fieldTwo, false),
OtpInput(_fieldThree, false),
OtpInput(_fieldFour, false)
],
),
const SizedBox(
height: 30,
),
ElevatedButton(
onPressed: () {
setState(() {
_otp = _fieldOne.text +
_fieldTwo.text +
_fieldThree.text +
_fieldFour.text;
});
},
child: const Text(‘提交’)),
const SizedBox(
height: 30,
),
// Display the entered OTP code
Text(
_otp ?? ‘验证码’,
style: const TextStyle(fontSize: 30),
)
],
),
);
}
}
// 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();
}
},
),
);
}
}
为了仅用几行代码快速实现您的目标,您可以使用第三方插件。在我们的例子中一些好的是pin_code_fields,otp_text_field等。 下面的例子将使用pin_code_fileds,它提供了很多很棒的功能:
-
自动将下一个字段集中在打字上,将上一个字段集中在委派上
-
可以设置为任意长度
-
高度可定制
-
输入文本的 3 种不同类型的动画
-
动画活动、非活动、选定和禁用字段颜色切换
-
自动对焦选项
-
从剪贴板粘贴 OTP 代码
您还可以在终端窗口中看到您输入的字符:
代码
1.安装插件:
flutter pub add pin_code_fields
2.最终代码:
import ‘dart:math’ as math;
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’;
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 debug banner
debugShowCheckedModeBanner: false,
title: ‘坚果’,
theme: ThemeData(
primarySwatch: Colors.indigo,
),