英文:
OTPTextField: Null check operator used on a null value
问题
I am using otp_text_field: ^1.1.3
在 Flutter 应用中通过 PIN 码来验证电子邮件。
如果我尝试在输入框中输入第一个值,应用程序会崩溃并出现异常。
应用界面:
代码编辑器:
代码:
import 'package:flutter/material.dart';
import 'package:flutter_countdown_timer/flutter_countdown_timer.dart';
import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/otp_text_field.dart';
import 'package:otp_text_field/style.dart';
...
class OTPPage extends StatefulWidget {
SingInController con;
OTPPage(this.con);
@override
_PageState createState() => _PageState();
}
class _PageState extends State<OTPPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppBar(
elevation: 0,
backgroundColor: Theme.of(context).backgroundColor,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 50,
),
HeaderTxtWidget(
'Enter the code from your email',
fontSize: 16,
),
const SizedBox(
height: 20,
),
Center(
child: OTPTextField(
length: 4,
width: MediaQuery.of(context).size.width - 50,
fieldWidth: 50,
style: const TextStyle(fontSize: 17),
textFieldAlignment: MainAxisAlignment.spaceAround,
fieldStyle: FieldStyle.box,
outlineBorderRadius: 10,
onCompleted: (pin) {
widget.con.OTP = pin;
},
),
),
...
],
));
}
}
我添加了代码以获得更好的解决方案,而不是屏幕截图。请告诉我解决方案。谢谢!!!
1: https://i.stack.imgur.com/oZTff.png
2: https://i.stack.imgur.com/330gm.png
英文:
I am using otp_text_field: ^1.1.3
to verify email by pin code in the Flutter app.
If I try to enter the very first value in the input box, the app crashes on exception.
App UI:
Code Editor:
Code:
import 'package:flutter/material.dart';
import 'package:flutter_countdown_timer/flutter_countdown_timer.dart';
import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/otp_text_field.dart';
import 'package:otp_text_field/style.dart';
...
class OTPPage extends StatefulWidget {
SingInController con;
OTPPage(this.con);
@override
_PageState createState() => _PageState();
}
class _PageState extends State<OTPPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppBar(
elevation: 0,
backgroundColor: Theme.of(context).backgroundColor,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 50,
),
HeaderTxtWidget(
'Enter the code from your email',
fontSize: 16,
),
const SizedBox(
height: 20,
),
Center(
child: OTPTextField(
length: 4,
width: MediaQuery.of(context).size.width - 50,
fieldWidth: 50,
style: const TextStyle(fontSize: 17),
textFieldAlignment: MainAxisAlignment.spaceAround,
fieldStyle: FieldStyle.box,
outlineBorderRadius: 10,
onCompleted: (pin) {
widget.con.OTP = pin;
},
),
),
...
],
));
}
}
Added code for better instead of screenshot. Please let me know the solutions. Thank you!!!
答案1
得分: 0
为了避免错误,即使您不打算使用它,也需要包括 onChanged: (s) {} 回调。没有这个回调,onChange 属性将为 null,错误将发生。
OTPTextField(
length: 4,
width: MediaQuery.of(context).size.width - 50,
fieldWidth: 50,
style: const TextStyle(fontSize: 17),
textFieldAlignment: MainAxisAlignment.spaceAround,
fieldStyle: FieldStyle.box,
outlineBorderRadius: 10,
onChanged: (val) {},
onCompleted: (pin) {
widget.con.OTP = pin;
},
)
英文:
To avoid the error, it is necessary to include the onChanged: (s) {} callback, even if you do not plan to use it. Without this callback, the onChange property will be null and the error will occur.
OTPTextField(
length: 4,
width: MediaQuery.of(context).size.width - 50,
fieldWidth: 50,
style: const TextStyle(fontSize: 17),
textFieldAlignment: MainAxisAlignment.spaceAround,
fieldStyle: FieldStyle.box,
outlineBorderRadius: 10,
onChanged: (val) {},
onCompleted: (pin) {
widget.con.OTP = pin;
},
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论