CardFormField field styling unusable when phone is in dark mode for iOS only in latest version

[mobile-simformsolutions]

Describe the bug Still, facing issue in iOS in dark theme.

To Reproduce Steps to reproduce the behavior:

1. Update stripe version and it's working fine in Android for dark and light theme
2. It's not working style's any of field for iOS

Expected behavior It should work for iOS also

Smartphone / tablet

• Device: [iPhone Xs]
• OS: [iOS 15.5]
• Package version: [ flutter_stripe: ^3.1.0, stripe_android: ^3.1.1 ]
• Flutter version [3.0.0.]

CardFormField(
                          controller: store.controller,
                          onCardChanged: (card) {
                            print(card);
                            store.card = card;
                          },
                          style: CardFormStyle(
                              textColor: AppColors.textColor,
                              borderColor: AppColors.greyShade1,
                              borderWidth: 1,
                              borderRadius: 5,
                              cursorColor: AppColors.textColor,
                              placeholderColor: AppColors.greyShade1,
                              textErrorColor: AppColors.textColor,
                              backgroundColor: (Platform.isIOS &&
                                      SchedulerBinding.instance.window
                                              .platformBrightness ==
                                          Brightness.dark)
                                  ? AppColors.colorPrimary
                                  : Colors.white),
                        );

[ShwetaChauhan18]

After updating version 3.2.0 we are still getting this issue. Also, new changes for 'countryCode' is not working in iOS.

[pravin-sorigin]

Hi guys, I'm also facing same issue but at my end it's not even working in light mode. CardFormField is not using none of given styling. Also enablePostalCode=false not working. On android it's working perfectly fine.

card.CardFormField(
                        controller: _cardFormEditController,
                        countryCode: BlocProvider.of<AppBloc>(context).state.countryCode,
                        onCardChanged: (card) {
                          _cardFieldInputDetails = card;
                        },
                        style: card.CardFormStyle(
                          backgroundColor: AppColors.appColorTransparent,
                          borderWidth: 0,
                          borderColor: AppColors.appColorTransparent,
                          borderRadius: 0,
                          cursorColor: AppColors.appColor0xffffb64c,
                          textColor: AppColors.appColor0xffffffff,
                          fontSize: (18 * MediaQuery.of(context).textScaleFactor).toInt(),
                          textErrorColor: AppColors.appErrorTextColor,
                          placeholderColor: AppColors.appColor0xff7b7e8b,
                        ),
                        enablePostalCode: false,
                      )

Here are some screen screenshot from android and iOS.

I'm using: flutter_stripe: ^5.0.0

[diegoveloper]

any news about this? A workaround could be detecting the theme mode of the OS config and then if it's dark (only iOS) use a dark background for the textfield.

[remonh87]

Unfortunately the Stripe iOS sdk only supports setting the background, cursorcolor, borderradius and cursorcolor. I will take it up with Stripe and see if there are plans to make the form field consistent with Android.

At the moment I would suggest to go for @diegoveloper work around by making the background dark if the theme on the phone is dark.

Another alternative is go for the paymentsheet which provides a more smooth integration and customization possibilities.

[DDavidPrime]

@remonh87 Any update on this one?

[Erastoh]

The trick is to focus on the backgroundColor only and the textColor will respond effectively on dark and light mode. I changed the backgroundColor to the below code and it displays all the numbers well on both android and ios.

CardFormField(
                          controller: controller,
                          dangerouslyGetFullCardDetails: true,
                          style: CardFormStyle(
                            fontSize: 20,
                            backgroundColor: (Platform.isIOS &&
                                SchedulerBinding.instance.window
                                    .platformBrightness ==
                                    Brightness.dark)
                                ? Color(0xff132b3b)
                                : Colors.white,
                            borderColor: Colors.black,
                            borderRadius: 5,
                            cursorColor: Colors.black,
                            placeholderColor: Colors.black,
                            textErrorColor: Colors.red,
                          ),
                        ),

[remonh87]

this should be fixed now with the new styling options. Feel free to reopen it if this still occurs.