“OTPTextField: 对空值使用了空值检查运算符”

huangapple go评论71阅读模式
英文:

OTPTextField: Null check operator used on a null value

问题

I am using otp_text_field: ^1.1.3 在 Flutter 应用中通过 PIN 码来验证电子邮件。
如果我尝试在输入框中输入第一个值,应用程序会崩溃并出现异常。
应用界面:
“OTPTextField: 对空值使用了空值检查运算符”
代码编辑器:
“OTPTextField: 对空值使用了空值检查运算符”

代码:

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:

“OTPTextField: 对空值使用了空值检查运算符”

Code Editor:

“OTPTextField: 对空值使用了空值检查运算符”

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

huangapple
  • 本文由 发表于 2023年5月10日 21:59:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76219329.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定