Flutter TextField小部件当otp自动填充然后需要自动提交下一页，所以我该怎么办

jyztefdp 于 2023-05-01 发布在 Flutter

关注(0)|答案(1)|浏览(111)

Flutter TextField小部件时，otp自动填充，然后需要自动提交下一页，所以我应该做什么-〉我需要这样做没有PinCodeTextField。

TextField(

                      autofocus: true,
                      autofillHints: const [AutofillHints.oneTimeCode],
                      keyboardType: TextInputType.phone,
                      controller: textEditingController1,

                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          height: 0.0,
                          color: Colors.black,
                          fontSize: 23

                      ),
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderSide: const BorderSide(color: Colors.red, width: 2.0),
                            borderRadius: BorderRadius.circular(14.0),
                          ),
                          filled: true,
                          hintStyle: const TextStyle(color: Colors.grey,fontFamily: 'Sans',fontSize: 18.0,height: 0.9),
                          hintText: "OTP",
                          fillColor: Colors.white),
                          maxLength: 6,
                      onSubmitted: (otp) {
                        // this.smsOTP = '123';
                        int length = otp.length;
                        print("onchangeee....");
                        print('$length');
                        if (length == 6){
                          verify(otp);
                          // print("resss $otpsendres");
                        }
                      },
                    ),

flutter

来源：https://stackoverflow.com/questions/72158757/flutter-textfield-widget-when-otp-autofill-then-need-to-auto-submit-next-page-s

1条答案

按热度按时间

xn1cxnb41#

您可以使用此package

late OTPTextEditController controller;
  late OTPInteractor _otpInteractor;
  TextEditingController otpCon = TextEditingController();

 @override
  void initState() {
    super.initState();
    _otpInteractor = OTPInteractor();
    _otpInteractor
        .getAppSignature()
    //ignore: avoid_print
        .then((value) => print('signature - $value'));

    controller = OTPTextEditController(
      codeLength: 5,
      //ignore: avoid_print
      onCodeReceive: (code) => print('Your Application receive code - $code'),
      otpInteractor: _otpInteractor,
    )..startListenUserConsent(
          (code) {
            RegExp regex = RegExp(r'\d+');
            RegExpMatch? match = regex.firstMatch(code ?? "");
            String otpString = match?.group(0) ?? "";
            otpCon.text = otpString;
        return otpString;
      },
      strategies: [
        SampleStrategy(),
      ],
    );
  }

在你的textField中添加控制器并设置其他属性。

TextField(
            textInputAction: TextInputAction.done,
            keyboardType: TextInputType.number,
            controller: otpCon,
          )

这是SampleStrategy类，您可以在其中设置侦听传入短信的持续时间。希望能帮上忙。

class SampleStrategy extends OTPStrategy {
  @override
  Future<String> listenForCode() {
    return Future.delayed(
      const Duration(minutes: 5),
          () => 'Your code is 54321',
    );
  }
}

赞(0）回复(0）举报 2023-05-01

我来回答

Flutter TextField小部件当otp自动填充然后需要自动提交下一页，所以我该怎么办

1条答案

相关问题

热门标签

最新问答