androidfluttertextinputone-time-passwordforgot-password

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


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()


Solution

  • 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(() {});
                            },
                          ),
    

    pin_field