adar2378 / pin_code_fields

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓
https://pub.dev/packages/pin_code_fields
MIT License
695 stars 340 forks source link

How to change Border Color ???? #378

Closed uzairleo closed 2 months ago

uzairleo commented 5 months ago

How to change border color when clicking on a button, button where text is filled and when it is filled and editing other value

talhahasanzia commented 5 months ago

Facing same issue

uzairleo commented 5 months ago

Hi @talhahasanzia i solved this , the solution is there inside the pintheme but this still need to be solve for generic purpose so if you want to change color of border just change the color of these fields accordingly activeFillColor selectedFillColor inActiveFillColor which are available inside PinTheme

attaching my pin code textfield for better understanding


PinCodeTextField(
              focusNode: viewModel.focusNode,
              autoDismissKeyboard: false,
              appContext: context,
              length: 6,
              obscureText: true,
              obscuringWidget: Container(
                height: 16.h,
                width: 16.w,
                decoration: const BoxDecoration(
                    color: Colors.white, shape: BoxShape.circle),
              ),
              animationType: AnimationType.fade,
              onSubmitted: (value) {
              },
              validator: (v) {
                if (v!.length < 6) {
                  return "";
                } else {
                  return null;
                }
              },
              textStyle: bodyTextStyle.copyWith(color: Colors.black),
              showCursor: false,
              pinTheme: PinTheme(
                  disabledColor: Colors.white,
                  shape: PinCodeFieldShape.circle,
                  fieldHeight: 16.h,
                  fieldWidth: 16.w,
                  activeFillColor: Colors.white.withOpacity(0.3),
                  inactiveFillColor: Colors.white.withOpacity(0.3),
                  selectedColor: Colors.white.withOpacity(0.3),
                  borderWidth: 0,
                  errorBorderWidth: 0,
                  activeBorderWidth: 0,
                  disabledBorderWidth: 0,
                  inactiveBorderWidth: 0,
                  selectedBorderWidth: 0,
                  inactiveColor: Colors.transparent,
                  activeColor: Colors.white.withOpacity(0.3),
                  selectedFillColor: Colors.white.withOpacity(0.3)),
              cursorColor: Colors.black,
              animationDuration: const Duration(milliseconds: 300),
              enableActiveFill: true,
              controller: viewModel.pinCodeEditingCtrlr2,
              keyboardType: TextInputType.number,
              boxShadows: const [
                BoxShadow(
                  offset: Offset(0, 1),
                  color: Colors.black12,
                )
              ],
              onCompleted: (v) {
                debugPrint("Completed");
              },
              onChanged: (value) {
                debugPrint(value);
              },
              beforeTextPaste: (text) {
                debugPrint("Allowing to paste $text");
                return true;
              },
            ),
stale[bot] commented 2 months ago

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.