Clear PIN from PinCodeTextField in flutter

Question

I am using PinCodeTextField plugin to verify PIN in Flutter, After failure validation I am trying to clear PinCodeTextField values through controller using pinLoginController.clear().

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

Since I am new to Flutter, Kindly provide what I am missing. Thank you.

EDIT 1 :

I edited with whole class.

Answer 1

You need call setState to update the view:

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

and also don't define your variable inside build method:

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

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

Answer 2

Try to substring your TextEditingController

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

Answer 3

In my case I would like just give an option to input correct code in case of incorrect validation. Just clean the 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();