在 flutter 中从 PinCodeTextField 中清除 PIN

Question

我正在使用 PinCodeTextField 插件来验证 Flutter 中的 PIN，验证失败后，我尝试使用 pinLoginController.clear() 通过控制器清除 PinCodeTextField 值。

class LoginPage extends State<LoginWithPin> {
  //Your code here

  @override
  Widget build(BuildContext context) {
       TextEditingController? pinLoginController = new TextEditingController();
    final String requiredPIN = "";
    String _title = '4.0';

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "4.0",
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: Center(
          child: Padding(          
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Enter Device PIN to Login',
                  style: TextStyle(fontSize: 20.0),
                ),
                SizedBox(height: 40.0),
                PinCodeTextField(
                  appContext: context,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                  keyboardType: TextInputType.number,
                  autoFocus: true,
                  readOnly: false,
                  obscureText: true,
                  length: 6,
                  onChanged: (value) {
                    print("Login Pin: " + value);
                  },
                  pinTheme: PinTheme(
                    shape: PinCodeFieldShape.underline,
                    borderRadius: BorderRadius.circular(6),
                    fieldHeight: 60,
                    fieldWidth: 40,
                    inactiveColor: Colors.blueAccent,
                    activeColor: Colors.black,
                    selectedColor: Colors.purple,
                  ),
                  controller: pinLoginController,
                  onCompleted: (value) async {
                    if (value == requiredPIN) {                    
                      print('valid pin');                     
                    } else {
                      print('invalid pin' + pinLoginController.text);
                      setState(() {
                        print('invalid pin state' + pinLoginController.text);
                        pinLoginController.clear();
                      });
                    }
                  },
                ),                
              ],
            ),
          ),
        ),
      ),
    );
  }
}

由于我是 Flutter 新手，请提供我所缺少的内容。谢谢你。

编辑1：

我和全班一起编辑。

Answer 1

您需要调用

setState

来更新视图：

onCompleted: (value) async {
        if (value == requiredPIN) { 
          print('valid pin');
        } else {
          print('invalid pin' + pinLoginController.text);
          
          setState(() {
             pinLoginController.clear();
          });
      
        }
      },

并且也不要在构建方法中定义变量：

TextEditingController? pinLoginController = new TextEditingController();
final String requiredPIN = "";
String _title = '4.0';

@override
  Widget build(BuildContext context) {
       
   ...
}

Answer 2

尝试对你的 TextEditingController 进行子串化

pinLoginController.text = pinLoginController.text.substring(0, pinLoginController.text.length - length of your pin);

Answer 3

就我而言，我只想提供一个选项，以便在验证不正确的情况下输入正确的代码。只需清理 pinController.clear() 即可。

Pinput(
            controller: pinController,
            focusNode: focusNode,
            androidSmsAutofillMethod:
                AndroidSmsAutofillMethod.smsUserConsentApi,
            listenForMultipleSmsOnAndroid: true,
            defaultPinTheme: defaultPinTheme,
            separatorBuilder: (index) => const SizedBox(width: 16),
            validator: (value) {
              if (value == widget.validationCode) {
                return null;
              } else {
                widget.onCodeError();
                pinController.clear();