CardField widget displaying as blank on Android

[casumatt]

Describe the bug Our Flutter app uses: flutter_stripe: ^9.1.1. We use the CardField widget. It has been working perfectly, except we now have a user who has experienced the CardField widget as blank, instead of the little credit card icon, and the hint/label text. We have minimum sdk set as 21. I notice that when I am debugging (and the CardField is working) I still see some items in the debug log as per this link: https://github.com/flutter-stripe/flutter_stripe/issues/219, it doesnt seem to impact the CardField widget for me, but may be the cause of the issue for the user.

To Reproduce I haven't been able to reproduce the error, but I have attached a screenshot. The user has cleared app cache, uninstalled and reinstalled app, etc, etc. I have added a screenshot of the experience.

Expected behavior The CardField widget appears normally.

Smartphone / tablet

• Device: Android device
• OS: Android
• Package version: 9.1.1
• Flutter version 3.10.6

Additional context Screenshot attached.

[remonh87]

do you know the customers device and android version? To manage expectations I do not think there is much we can do if there is no suitable reproducition step

[LScodeblack]

Device is in dark mode, switch it and it will show

[casumatt]

@LScodeblack legend, thank you!

[casumatt]

@LScodeblack so thank you, dark mode is definitely the issue, but I imagined that darkmode was just making the text 'white', and the only issue was that the user couldn't see the prompts to type in their card details, but in actual fact it does cause CardField to error as per below....

D/EGL_emulation(27919): app_time_stats: avg=4219.07ms min=4219.07ms max=4219.07ms count=1 D/EGL_emulation(27919): app_time_stats: avg=8445.60ms min=129.63ms max=24780.09ms count=3 2 [log] NetworkConnectionManagerWrapper: ConnectivityResult.wifi I/au.com.casu(27919): NativeAlloc concurrent copying GC freed 43200(1610KB) AllocSpace objects, 10(392KB) LOS objects, 49% free, 9236KB/18MB, paused 907us,112us total 347.656ms D/EGL_emulation(27919): app_time_stats: avg=629.38ms min=130.39ms max=1540.05ms count=3 D/EGL_emulation(27919): app_time_stats: avg=296.18ms min=17.72ms max=1497.63ms count=6 E/Surface (27919): freeAllBuffers: 1 buffers were freed while being dequeued! W/au.com.casu(27919): Suspending all threads took: 19.332ms E/Surface (27919): getSlotFromBufferLocked: unknown buffer: 0x7a95a1643a70 I/au.com.casu(27919): NativeAlloc concurrent copying GC freed 5561(309KB) AllocSpace objects, 4(144KB) LOS objects, 49% free, 9200KB/17MB, paused 1.610ms,19.690ms total 331.538ms [log] Assessing profile completeness for the current user when the current user is not admin. [log] The employer's profile has been checked as: true [log] About to write matches 5 E/MethodChannel#flutter/platform_views(27919): Failed to handle method call E/MethodChannel#flutter/platform_views(27919): android.view.InflateException: Binary XML file line #23 in au.com.projectname:layout/stripe_card_input_widget: Binary XML file line #23 in au.com.projectname:layout/stripe_card_input_widget: Error inflating class E/MethodChannel#flutter/platform_views(27919): Caused by: android.view.InflateException: Binary XML file line #23 in au.com.casu:layout/stripe_card_input_widget: Error inflating class E/MethodChannel#flutter/platform_views(27919): Caused by: java.lang.reflect.InvocationTargetException E/MethodChannel#flutter/platform_views(27919): at java.lang.reflect.Constructor.newInstance0(Native Method) E/MethodChannel#flutter/platform_views(27919): at java.lang.reflect.Constructor.newInstance(Constructor.java:343) E/MethodChannel#flutter/platform_views(27919): at android.view.LayoutInflater.createView(LayoutInflater.java:858)

Is there an actual fix to this so that it works in Dark mode?

[guidotheelen]

Also encountered this issue.

The CardField breaks when running the Android device in darkmode. The CardFormField breaks in a similar way on Android regardless of the theme mode.

Specs: Flutter: 3.13 flutter_stripe: 9.4.0 Android version: 11 Device: Pixel 4

Anything we can do to fix it?

Stacktrace breaking CardFormField

E/flutter (18790): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(error, Binary XML file line #5 in com.signify.lumxpert.dev:layout/stripe_card_form_view: Binary XML file line #5 in com.signify.lumxpert.dev:layout/stripe_card_form_view: Error inflating class , null, android.view.InflateException: Binary XML file line #5 in com.signify.lumxpert.dev:layout/stripe_card_form_view: Binary XML file line #5 in com.signify.lumxpert.dev:layout/stripe_card_form_view: Error inflating class

[yussifm]

Am also facing the same issues here.

[yussifm]

It works on emulators but not on real devices

[remonh87]

This should be fixed from version 9.6.0.

[kekko7072]

@remonh87 I'm facing this issue with flutter_stripe: 10.0.0 running only in release mode for android. I have tested also the example app and it's also has the issue. Try running release mode with flutter 3.16.5 and Card Field Themes of the example.

Here a video using example app in flutter run --release:

https://github.com/flutter-stripe/flutter_stripe/assets/32552589/8773f4de-f561-45ac-a343-f0f85a63e7db

[remonh87]

@kekko7072 cannot see the video. Can you give me more info because for me it runs without issues on my pixel. There should be some logs in logcat

[kekko7072]

Sorry @remonh87 here the video and logs. Video:

https://github.com/flutter-stripe/flutter_stripe/assets/32552589/9be71671-aa22-4ecb-9c67-fc0c7fe7349a

Logs:

✓  Built build/app/outputs/flutter-apk/app-release.apk (17.3MB).

Flutter run key commands.
h List all available interactive commands.
c Clear the screen
q Quit (terminate the application on the device).
E/flutter (30569): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(error, Binary XML file line #39 in com.flutter.stripe.example:layout/stripe_card_input_widget: Binary XML file line #39 in com.flutter.stripe.example:layout/stripe_card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout, null, android.view.InflateException: Binary XML file line #39 in com.flutter.stripe.example:layout/stripe_card_input_widget: Binary XML file line #39 in com.flutter.stripe.example:layout/stripe_card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/flutter (30569): Caused by: android.view.InflateException: Binary XML file line #39 in com.flutter.stripe.example:layout/stripe_card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/flutter (30569): Caused by: java.lang.reflect.InvocationTargetException
E/flutter (30569):  at java.lang.reflect.Constructor.newInstance0(Native Method)
E/flutter (30569):  at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/flutter (30569):  at android.view.LayoutInflater.createView(LayoutInflater.java:852)
E/flutter (30569):  at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1004)
E/flutter (30569):  at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:959)
E/flutter (30569):  at android.view.LayoutInflater.rInflate(LayoutInflater.java:1121)
E/flutter (30569):  at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1082)
E/flutter (30569):  at android.view.LayoutInflater.rInflate(LayoutInflater.java:1124)
E/flutter (30569):  at android.view.LayoutInflater.inflate(LayoutInflater.java:654)
E/flutter (30569):  at android.view.LayoutInflater.inflate(LayoutInflater.java:532)
E/flutter (30569):  at android.view.LayoutInflater.inflate(LayoutInflater.java:479)
E/flutter (30569):  at n9.l.c(SourceFile:1)
E/flutter (30569):  at com.stripe.android.view.j0.<init>(SourceFile:1)
E/flutter (30569):  at com.stripe.android.view.j0.<init>(SourceFile:2)
E/flutter (30569):  at p8.p.<init>(SourceFile:1)
E/flutter (30569):  at p8.q.c(SourceFile:1)
E/flutter (30569):  at e5.h.<init>(SourceFile:1)
E/flutter (30569):  at e5.i.a(SourceFile:1)
E/flutter (30569):  at io.flutter.plugin.platform.e0.M(SourceFile:1)
E/flutter (30569):  at io.flutter.plugin.platform.e0$a.b(SourceFile:1)
E/flutter (30569):  at je.l$a.c(SourceFile:1)
E/flutter (30569):  at je.l$a.d(SourceFile:1)
E/flutter (30569):  at ke.i$a.a(SourceFile:1)
E/flutter (30569):  at ce.c.h(SourceFile:1)
E/flutter (30569):  at ce.c.i(SourceFile:1)
E/flutter (30569):  at ce.c.e(SourceFile:1)
E/flutter (30569):  at ce.b.run(SourceFile:1)
E/flutter (30569):  at android.os.Handler.handleCallback(Handler.java:938)
E/flutter (30569):  at android.os.Handler.dispatchMessage(Handler.java:99)
E/flutter (30569):  at android.os.Looper.loop(Looper.java:250)
E/flutter (30569):  at android.app.ActivityThread.main(ActivityThread.java:7806)
E/flutter (30569):  at java.lang.reflect.Method.invoke(Native Method)
E/flutter (30569):  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
E/flutter (30569):  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:958)
E/flutter (30569): Caused by: java.lang.IncompatibleClassChangeError: Class 'android.content.res.XmlBlock$Parser' does not implement interface 'th.a' in call to 'int th.a.next()' (declaration of 'androidx.core.content.res.c' appears in /data/app/~~KFM4rXT314r-Vw_5R-kvCw==/com.flutter.stripe.example-p16mJ944pKy_dMQi5bt9IQ==/base.apk)
E/flutter (30569):  at androidx.core.content.res.c.a(SourceFile:1)
E/flutter (30569):  at androidx.core.content.res.h.k(SourceFile:1)
E/flutter (30569):  at androidx.core.content.res.h.d(SourceFile:1)
E/flutter (30569):  at androidx.core.content.a.c(SourceFile:1)
E/flutter (30569):  at g.a.a(SourceFile:1)
E/flutter (30569):  at x6.c.b(SourceFile:1)
E/flutter (30569):  at com.google.android.material.textfield.z.i(SourceFile:1)
E/flutter (30569):  at com.google.android.material.textfield.z.<init>(Unknown Source:63)
E/flutter (30569):  at com.google.android.material.textfield.TextInputLayout.<init>(SourceFile:2)
E/flutter (30569):  at com.google.android.material.textfield.TextInputLayout.<init>(SourceFile:1)
E/flutter (30569):  ... 34 more
E/flutter (30569): )
E/flutter (30569): #0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:651)
E/flutter (30569): #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:322)
E/flutter (30569): <asynchronous suspension>
E/flutter (30569): #2      ExpensiveAndroidViewController._sendCreateMessage (package:flutter/src/services/platform_views.dart:1081)
E/flutter (30569): <asynchronous suspension>
E/flutter (30569): #3      AndroidViewController.create (package:flutter/src/services/platform_views.dart:804)
E/flutter (30569): <asynchronous suspension>
E/flutter (30569):

[kekko7072]

Here flutter doctor

[!] Flutter (Channel stable, 3.16.5, on macOS 14.2.1 23C71 darwin-arm64, locale it-IT) • Flutter version 3.16.5 on channel stable at /Users/francescovezzani/Developer/flutter ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.2.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/francescovezzani/Developer/flutter. Consider adding /Users/francescovezzani/Developer/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 78666c8dc5 (2 weeks ago), 2023-12-19 16:14:14 -0800 • Engine revision 3f3e560236 • Dart version 3.2.3 • DevTools version 2.28.4 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/xxy/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode-15.2.0-Beta.app/Contents/Developer • Build 15C5500c • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • 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 17.0.7+0-17.0.7b1000.6-10550314) [✓] VS Code (version 1.85.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (6 available) • motorola one action (mobile) • xx • android-arm64 • Android 11 (API 30) • iPhone di Mara (mobile) • 00008030-000E09082130C02E • ios • iOS 17.2.1 21C66 • iPhone di Francesco (mobile) • xx • ios • iOS 17.2.1 21C66 • iPhone 15 Pro (mobile) •xx • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.2.1 23C71 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 120.0.6099.129 ! Error: Browsing on the local area network for Francesco’s Apple Watch. Ensure the device is unlocked and discoverable via Bluetooth. (code -27) ! Error: Browsing on the local area network for Apple Vision Pro. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. (code -27) ! Error: Browsing on the local area network for iPad di Francesco. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category.

[remonh87]

@kekko7072 this has to do with the fact that you do not follow the installation guidelines for the theme. Can you make sure you apply these settings and try it again?

[kekko7072]

@kekko7072 this has to do with the fact that you do not follow the installation guidelines for the theme. Can you make sure you apply these settings and try it again?

@remonh87 thanks for the response. I tested the example app of the flutter_stripe package and in debug mode it is working but in release mode it's not, like my own app.

I followed and added all setup requirements, i think it's something broke in release mode.

[remonh87]

@jonasbark I can reproduce it in the example app. Can you have a look at it? Seems like something broke in the last sync.

[jonasbark]

I was able to reproduce it as well, but have not found a solution. Only (bad) workaround would be to disable minification and resource shrinking during release builds:

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
            minifyEnabled false
            shrinkResources false

            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"

        }
    }

It's likely a proguard issue, but I have not found the entries to add as of yet.

[ctechdev]

9.6.0

Any update? I'm using flutter_stripe: ^10.0.0 but on Android with dark theme the problem persists

[casumatt]

Also looking for an update ASAP

[paulinovm]

I am using version 10.1.0 and I have the same problem, both in debug and realase. Any help? I have configured the theme as shown in the example (copy and paste), in build.gradle I have the same versions as in the example but nothing.

[Nico04]

Using v10.1.1, and I have the same issue with the CardFormField : it throws and leave a blank. CardField works fine.

[remonh87]

@jonasbark do you have an update on this? I remember you took a look at it.

[QPAYRE]

Same issue, some times I need to add spaces on the top and bottom of CardField widget