Copy Paste on pin text field in flutter not working

user_15513429 0
Viewed 250

I have a PIN text field in flutter and I'm trying to paste the code in text field. However, only in the first text field is the code pasted and not in the others.

enter image description here

flutter-layout flutter textfield copy-paste uitextfield
1 Answers

You can use pin_code_fields library link

Code Snippet:

PinCodeTextField(
        keyboardType: TextInputType.number,
        appContext: context,
        length: 6,
        obscureText: false,
        dialogConfig: DialogConfig(
          dialogContent: "Do you want to paste ",
          dialogTitle: "Paste OTP",
        ),
        pastedTextStyle: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
        pinTheme: PinTheme(
          inactiveColor: Colors.black45,
          selectedColor: Colors.green,
          shape: PinCodeFieldShape.box,
          borderRadius: BorderRadius.circular(5),
          fieldHeight: 50,
          fieldWidth: 40,
          activeFillColor: Colors.white,
        ),

        onChanged: (value) {
          setState(() {});
        },
        onCompleted: (pin) {
          setState(() {});

        },
        beforeTextPaste: () {
          return true;
        },

Alter the dialogConfig and pastedTextStyle property for more flexibility during pasting the otp

For more Detailed example use the following github_link

user_134318190
Related