PinCodeTextField causes constant redraws

[turulix]

When Adding PinCodeTextField to a screen it causes constant frame redraws, causing performance issues and making Integration testing impossible.

Flutter: v3.16.5 pin_code_fields: 8.0.1

Here is the Same Page with and without a PinCodeTextField from the flutter performance window: Without:

With:

I couldn't figure out what causes this issue, but maybe you guys can figure it out. My component looks something like this (some elements are commented out to ensure its not one of those causing the issue):

class RegistrationVerifyPhoneScreen extends StatelessWidget {
  const RegistrationVerifyPhoneScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final api = Get.find<Api>();
    final enteredPinController = TextEditingController();

    void onContinue() async {
       // Do some things here
    }

    return ScreenBase(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text(t.strings.registration.step_phone_verify,
            style: context.theme.textTheme.headlineSmall, textAlign: TextAlign.center),
        const Spacer(),
        PinCodeTextField(
          appContext: context,
          length: 6,
          // animationType: AnimationType.fade,
          // animationDuration: const Duration(milliseconds: 100),
          // backgroundColor: context.theme.scaffoldBackgroundColor,
          // enablePinAutofill: true,
          // keyboardType: TextInputType.number,
          // controller: enteredPinController,
          // pinTheme: PinTheme(
          //   shape: PinCodeFieldShape.box,
          //   borderRadius: BorderRadius.circular(5),
          //   selectedColor: context.theme.primaryColor,
          //   activeColor: Colors.black,
          //   errorBorderColor: context.theme.errorColor,
          //),
        ),
        const Spacer(),
        FilledButton(
          onPressed: onContinue,
          child: Text(t.strings.continuee),
        ),
      ],
    ));
  }
}

[Yagorundy]

I think I run into the same issue from this package @adar2378

[andredev24]

@Yagorundy @adar2378 It may be happening if you have showCursor enabled. This would be normal, since it is running an infinite animation while the course is activated and a part of the widget is rebuilt.

   PinCodeTextField(
      length: 6,
      showCursor: false
      appContext: context,
  );

[richanshah]

@turulix any update on this? , is it resolved?

[turulix]

I decided to implement my own, after waiting weeks without a response, but even showCursor: false dosn't really make sence in my opinion (havn't tried it) but it updates at basically 60fps and a cursor blinking shouldn't do it that fast, comparing it to a normal text field which updates like every few frames

[andredev24]

I decided to implement my own, after waiting weeks without a response, but even showCursor: false dosn't really make sence in my opinion (havn't tried it) but it updates at basically 60fps and a cursor blinking shouldn't do it that fast, comparing it to a normal text field which updates like every few frames

And why doesn't it make sense if you haven't even tried it?

You can make the blinking slower, all of this can be set in the options or you can create a new fork out and make the blinking animation slower.

But in general it is the expected result and there is nothing to do there. I was able to verify that the frame of a TextField() widget has the same behavior as PinCodeTextField() when the course is activated..

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.