CardFormField's CardFormStyle not working

[ShwetaChauhan18]

CardFormField new style is not working. Only backgroundColor is changing.

Flutter 3.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ee4e09cce0 (7 days ago) • 2022-05-09 16:45:18 -0700
Engine • revision d1b9a6938a
Tools • Dart 2.17.0 • DevTools 2.12.2
shwetachauhan@SF-LAP-160 flutter_stripe % 

style: CardFormStyle(
     textColor: AppColors.textColor,
     fontSize: 18,
     backgroundColor: Colors.white,
     borderColor: AppColors.lightPink,
     cursorColor: AppColors.textColor,
     placeholderColor: AppColors.textColor,
     textErrorColor: AppColors.textColor,
 ),

[remonh87]

can you tell me for which platform?

[ShwetaChauhan18]

In both platform, Is there anything which I should additional or something which I missed from my side?

[ShwetaChauhan18]

[ShwetaChauhan18]

[ShwetaChauhan18]

Also, after confirm payment it's open web hook. Can we restrict that?

[korzonkiee]

The CardFormStyle doesn't work for me on Android (Xiaomi Mi A2 Lite, Android 9), but works fine on iOS.

I'm on the latest flutter_stripe: 3.0.0 version.

class _CardField extends StatelessWidget {
  const _CardField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CardFormField(
      style: CardFormStyle(
        fontSize: 16,
        textColor: AppColors.black,
        cursorColor: AppColors.black,
        borderColor: AppColors.black,
        textErrorColor: AppColors.red,
        placeholderColor: AppColors.dividerGrey,
      ),
      autofocus: true,
      controller: context.read<CardFormEditController>(),
    );
  }
}

Android	iOS
https://user-images.githubusercontent.com/26259846/168812045-e84a0dd4-7967-455f-bbf4-4a312660fbe5.mp4	https://user-images.githubusercontent.com/26259846/168815351-984e6734-0ddc-4ab2-8816-186ea1818faf.mp4

Note that on Android, the behavior of the text input fields when typing in digits is very strange.

Environment

flutter --version

Flutter 3.0.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision ee4e09cce0 (8 days ago) • 2022-05-09 16:45:18 -0700 Engine • revision d1b9a6938a Tools • Dart 2.17.0 • DevTools 2.12.2

flutter doctor

[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-arm, locale en-PL)
• Flutter version 3.0.0 at /Users/korzonkiee/fvm/versions/3.0.0
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ee4e09cce0 (8 days ago), 2022-05-09 16:45:18 -0700
• Engine revision d1b9a6938a
• Dart version 2.17.0
• DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/korzonkiee/Library/Android/sdk
• Platform android-32, build-tools 32.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.3

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.67.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.40.0

[✓] Connected device (6 available)
• Mi A2 Lite (mobile) • c6b2843b0205 • android-arm64 • Android 9 (API 28)
• iPhone 12 mini (mobile) • 16CFCF29-3449-49EB-B76C-0FFEC3A3BEB4 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
• iPhone 13 Pro Max (mobile) • D9D187E2-22C1-4237-9D3D-9A2D39367754 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
• iPhone SE (3rd generation) (mobile) • 40BBC38E-5FC5-4A92-AC47-E1009A848780 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 12.3.1 21E258 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

[korzonkiee]

Actually, it doesn't seem to work on iOS as well. I changed the textColor property to red and it still displays in black.

class _CardField extends StatelessWidget {
  const _CardField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CardFormField(
      style: CardFormStyle(
        fontSize: 24,
        textColor: AppColors.red,
        cursorColor: AppColors.black,
        borderColor: AppColors.black,
        textErrorColor: AppColors.red,
        placeholderColor: AppColors.dividerGrey,
      ),
      autofocus: true,
      controller: context.read<CardFormEditController>(),
    );
  }
}

[remonh87]

#749 will fix the styling on Android but on iOS we need to wait on the Stripe sdk

[priyankabambharoliya-official]

I have same issue

[remonh87]

Fixed in version 3.1.0

[korzonkiee]

I keep having very strange behavior on Android. I'm using flutter_stripe 3.1.0. Tested both on debug & release. @remonh87 do you happen to know what is that a case?

CleanShot.2022-06-15.at.14.41.06.mp4