PinFieldAutoFill background color does not change

Question

I'm using the sms_autofill package to create an SMS verification page. I use the PinFieldAutoFill widget to insert the sms code.

I want the background color of the widget to be white instead of grey:

How do I change it?

Here is my code:

PinFieldAutoFill(
      autoFocus: autoFocus,
      codeLength: smsCode.length,
      currentCode: autoComplete ? smsCode : null,
      decoration: BoxLooseDecoration(
        strokeColorBuilder: PinListenColorBuilder(Colors.black, Colors.black26),
        bgColorBuilder: const FixedColorBuilder(Colors.white),
        strokeWidth: 1.2,
      ),
      onCodeChanged: (p0) {
        if (p0?.length == smsCode.length && !autoComplete) {
          context.read<LoginBloc>().add(LoginEventSubmitSmsCode(p0!));
        }
      },
    );

Answer 1

The reason is that you defined a global theme for the inputDecorationTheme

You probably have this theme in your global theme

inputDecorationTheme: const InputDecorationTheme(
        fillColor: Color(0xfff5f5f5),
        filled: true,
)

To override it, you can use the theme widget to wrap your PinFieldAutoFill

Theme(
      data: Theme.of(context).copyWith(
        inputDecorationTheme: const InputDecorationTheme(
          filled: false,
        ),
      ),
      child: PinFieldAutoFill(...