how to set selected and enabled border color in pinfieldautofill() in flutter

Question

PinFieldAutoFill(
                      currentCode: codevalue,
                      autoFocus: true,
                      focusNode: myfocusnode,
                      codeLength: 6,
                      cursor: Cursor(
                        width: 2,
                        height: 20,
                        color: Colors.red,
                        radius: Radius.circular(1),
                        enabled: true,
                      ),
                      textInputAction: TextInputAction.done,
                      decoration: BoxLooseDecoration(
                          radius: Radius.circular(10.0),
                          bgColorBuilder: FixedColorBuilder(
                              Color.fromARGB(255, 255, 255, 255)),
                          strokeColorBuilder: FixedColorBuilder(Colors.black),
                          gapSpace: 16),

This is my code I just want to add selected and enabled border color in pinfieldautofill()

Answer 1

You can use the package below, customisation is easy too:

https://pub.dev/packages/pin_code_fields

You can use pinTheme parameter in the widget to change your pins border or color and shape too. Please see code for implementation:

PinCodeTextField(
                        appContext: context,
                        pastedTextStyle: TextStyle(
                          color: Colors.green.shade600,
                          fontWeight: FontWeight.bold,
                        ),
                        length: 6,
                        obscureText: false,
                        animationType: AnimationType.fade,
                        hintCharacter: '*',
                        textStyle: TextStyle(
                            color: ColorUtils.blackText,
                            fontSize: FontSize.title24,
                            fontWeight: FontWeight.w700),
                        pinTheme: PinTheme(
                          shape: PinCodeFieldShape.box,
                          borderRadius: BorderRadius.circular(4),
                          fieldHeight: SizeConfig.blockSizeVertical! * 8,
                          fieldWidth: SizeConfig.blockSizeHorizontal! * 13,
                          inactiveFillColor: ColorUtils.textFieldBG,
                          inactiveColor: ColorUtils.cancelRed,
                          selectedColor: Colors.black,
                          activeFillColor: ColorUtils.textFieldBG,
                          activeColor: ColorUtils.inputBorder,
                          selectedFillColor: ColorUtils.textFieldBG,
                        ),
                        cursorColor: Colors.black,
                        animationDuration: const Duration(milliseconds: 300),
                        enableActiveFill: true,
                        controller: _controller.textEditingController,
                        keyboardType: TextInputType.number,
                        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                        onCompleted: (v) {
                          _controller.checkOtpCode();
                        },
                        onChanged: (value) {
                          //   setState(() {});
                        },
                      ),