Can someone what I'm doing wrong with pin_code_fields package?

Question

-----CLOSED, REMADE WITH ANOTHER PACKAGE-----

I'm using pin_code_fields package to create a nice UI for code entering. But, when validation start working, I'm getting a weird error border which is not supposed to look like this.

PinCodeTextField code:

SizedBox(
        width: 222.w,
        child: PinCodeTextField(
          length: 4,
          controller: notifier.codeController,
          appContext: context,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          onChanged: (value) {},
          enableActiveFill: true,
          useExternalAutoFillGroup: true,
          animationDuration: const Duration(milliseconds: 300),
          animationType: AnimationType.fade,
          autoFocus: true,
          cursorColor:
              Theme.of(context).extension<MyThemeExtension>()!.black,
          keyboardType: TextInputType.number,
          validator: (value) {
            if (value!.length < 4) {
              return localizations.thisFieldIsRequired;
            }
            if (int.tryParse(value!) == null) {
              return localizations.unavaiableCharacters;
            }else {
              return null;
            }
          },
          pinTheme: PinTheme(
            borderRadius: BorderRadius.circular(8.r),
            selectedColor:
                Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
            activeFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            activeColor:
                Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
            selectedFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            inactiveFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            inactiveColor:
                Theme.of(context).extension<MyThemeExtension>()!.grey2,
            // errorBorderColor:
            //     Theme.of(context).extension<MyThemeExtension>()!.redDiscount,
            shape: PinCodeFieldShape.box,
            borderWidth: 1.r,
            fieldHeight: 48.r,
            fieldWidth: 48.r,
          ),
        ),
      ),

That's how it looks like

I have tried changing different parameters like enableActiveFill and PinTheme...

Answer 1

Check below code useExternalAutoFillGroup CAPITAL comment :)

SizedBox(
            width: 222.w,
            child: PinCodeTextField(
              length: 4,
              controller: notifier.codeController,
              appContext: context,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              onChanged: (value) {},
              enableActiveFill: true,
              useExternalAutoFillGroup: true, //TRY BY SET FALSE HERE
              animationDuration: const Duration(milliseconds: 300),
              animationType: AnimationType.fade,
              autoFocus: true,
              cursorColor:
                  Theme.of(context).extension<MyThemeExtension>()!.black,
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value!.length < 4) {
                  return localizations.thisFieldIsRequired;
                }
                if (int.tryParse(value!) == null) {
                  return localizations.unavaiableCharacters;
                }else {
                  return null;
                }
              },
              pinTheme: PinTheme(
                borderRadius: BorderRadius.circular(8.r),
                selectedColor:
                    Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
                activeFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                activeColor:
                    Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
                selectedFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                inactiveFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                inactiveColor:
                    Theme.of(context).extension<MyThemeExtension>()!.grey2,
                // errorBorderColor:
                //     Theme.of(context).extension<MyThemeExtension>()!.redDiscount,
                shape: PinCodeFieldShape.box,
                borderWidth: 1.r,
                fieldHeight: 48.r,
                fieldWidth: 48.r,
              ),
            ),
          ),