App not working in Android 12 / 13

samhepburn-hiya commented 9 months ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

We have developed an app using FlutterFlow (https://app.flutterflow.io/project/hiya-axde0c). When the app is run on an Android 12 or 13 device the screen goes green (the primary colour) and no further functionality is possible.

When checking the emulator logs, the following trace was observed:

E  [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(flutter_stripe initialization failed, The plugin failed to initialize:\
                                                                                                    Your theme isn't set to use Theme.AppCompat or Theme.MaterialComponents.\
                                                                                                    Please make sure you follow all the steps detailed inside the README: https://github.com/flutter-stripe/flutter_stripe#android\
                                                                                                    If you continue to have trouble, follow this discussion to get some support https://github.com/flutter-stripe/flutter_stripe/discussions/538, null, null)\
                                                                                                    #0      JSONMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:171)\
                                                                                                    #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:310)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #2      MethodChannelStripe.initialise (package:stripe_platform_interface/src/method_channel_stripe.dart:53)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #3      Stripe._initialise (package:flutter_stripe/src/stripe.dart:699)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #4      initializeStripe (package:hiya/backend/stripe/payment_manager.dart:31)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #5      main (package:hiya/main.dart:34)\
                                                                                                    <asynchronous suspension>}

This suggests an issue concerning stripe and the app theme.

After discussion with FlutterFlow support I was advised to post this here as a bug.

Expected Behavior

The app should load consistently and correctly on Android 11, 12 and 13.

Steps to Reproduce

Build a project that uses the stripe package.
Run on a device using Android 12 / 13
Observe that the app does not run

(I do not know if these steps are reproducible from a blank project. Our last deployed version of the app (March 2023) worked on these OS versions.)

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITESkMrq5ZdgocsE7rrtbvp6hQAkH1x/bZJEl9cbcEsbfar1OooEPOr+VFhVX/GVS35XfFD++UUepMmPj9/fUMYFCzCrQoNoz89udDngWn2mR66RO8+wTnZATMVUJ2K+056zmwlSWbR0V3gtw1r/cq3qNleeY8aSfxBlZ7vfcPo=

Context

We cannot deploy our application as it will not run on Android 12 and 13.

Visual documentation

An example running the app on an emulated Pixel XL with Android 13:

When running the app on an emulated device with Android 11:

This behaviour was originally noticed on many physical devices when the app was rolled out to the Play Store. it's not an emulator issue.

Additional Info

Almost all of the things we have changed since our last deployment (that worked successfully on Android 12/13) are cosmetic:

Updated colours in colour palette
Added dark mode palette
Updated Base API URL
General style updates to buttons, text etc.

General functionality has not changed.

We have not changed any code locally etc.

Environment

- FlutterFlow version: 
- Platform: Android
- Browser name and version: Android 12 / 13
- Operating system and version affected:

davood-flutterflow commented 9 months ago

We troubleshoot this issue in support.

hariprasadms commented 9 months ago

Hi @samhepburn-hiya - Thanks for submitting the issue. As per support team investigation, it is related to stripe package compatibility with some versions of android real devices. I can mark this as bug. Development will look into it shortly. Thanks

github-actions[bot] commented 9 months ago

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

wenkaifan0720 commented 9 months ago

Hi @samhepburn-hiya. Is this still happening to you? I tried to run the snapshot project you shared on an Android 13 emulator and could launch the app.

bydakid commented 9 months ago

Hi, I am experiencing the same issue with my app and the stripe package. With Android 13 and 12 my screen does not change but with android 11 everything works fine. Is this issue been solved?

samhepburn-98 commented 9 months ago

Hi @samhepburn-hiya. Is this still happening to you? I tried to run the snapshot project you shared on an Android 13 emulator and could launch the app.

This still is not working for us, we are still unable to release that version of the app.

Jahalex commented 8 months ago

I have the same problem, white screen when opening the APK since I put Stripe in my app. It’s very blocking!

Jahalex commented 8 months ago

@wenkaifan0720 @SameerShahzad99 Can you tell us the progress of this bug please? Do you have any ideas on how to resolve this bug? I thank you in advance ☺️

wenkaifan0720 commented 8 months ago

Hi @Jahalex. Could you share a bug report code? I am still not able to reproduce this issue. I have also created a test project(https://app.flutterflow.io/project/flutterflow-issue-1236-knvej2). Could you see if you can reproduce the issue in this project?

Jahalex commented 8 months ago

@wenkaifan0720 So it will be complicated to release a bug report code because to reproduce the bug you have to test on an Android 12/13. You must install Stripe on the project then download the APK on Android 12 or 13.

samhepburn-hiya who initiated the bug to share the error:

E  [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(flutter_stripe initialization failed, The plugin failed to initialize:\
                                                                                                    Your theme isn't set to use Theme.AppCompat or Theme.MaterialComponents.\
                                                                                                    Please make sure you follow all the steps detailed inside the README: https://github.com/flutter-stripe/flutter_stripe#android\
                                                                                                    If you continue to have trouble, follow this discussion to get some support https://github.com/flutter-stripe/flutter_stripe/discussions/538, null, null)\
                                                                                                    #0      JSONMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:171)\
                                                                                                    #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:310)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #2      MethodChannelStripe.initialise (package:stripe_platform_interface/src/method_channel_stripe.dart:53)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #3      Stripe._initialise (package:flutter_stripe/src/stripe.dart:699)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #4      initializeStripe (package:hiya/backend/stripe/payment_manager.dart:31)\
                                                                                                    <asynchronous suspension>\
                                                                                                    #5      main (package:hiya/main.dart:34)\
                                                                                                    <asynchronous suspension>}

By investigating a little we can see that:

Theme issue: The error indicates that your Android app theme is not properly configured to use Theme.AppCompat or Theme.MaterialComponents. The Stripe plugin generally requires your app to use a Material Design-compatible theme to ensure it works properly.

Solution: To resolve this issue, follow these steps:

Make sure your Flutter app is configured to use a Material Design compatible theme, for example by using Flutter's ThemeData in your app.

Check your android/app/src/main/res/values/styles.xml file and make sure the theme you are using is compatible with Material Design. You can use Theme.AppCompat or Theme.MaterialComponents. For example :

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     <!-- Other style configurations -->
</style>

Also make sure you've followed the instructions specific to the Stripe plugin for Android, as described in their README. There may be additional configurations required to properly integrate Stripe into your application.

Updating dependencies: Make sure you are using the latest version of the Stripe plugin and that all dependencies are up to date. Sometimes issues are fixed in later versions.

This is an example that I gave but looking at the error we can see very clearly that it is a theme problem linked to Android. So to resolve this bug the theme track. I could see that the version of the SDK has evolved so perhaps when updating the SDK there may have been an oversight.

If I need to do tests or need help I remain available, because it is very blocking and I am a QA tester by profession so I don't mind doing tests if necessary.

The reason why it works well on other Androids is that the phone theme's dark mode is not as advanced as Android 12/13. So for me something related to the theme (darkness and light) must be missing as explained above to overcome the problems.

Then when we put the stripe action in the workflow we see very clearly that the theme is requested and therefore important for the SDK. This theme track is the most likely for me.

To reproduce the bug 2 solutions download the APK on an Android 12/13 and/or put the APK on an Android 12/13 phone emulator.

Jahalex commented 8 months ago

I found the error !!! 👍 💯 🥇 @wenkaifan0720 @SameerShahzad99

In step 3 of #Requirements #Android of the tutorial offered by stripe on Github: https://github.com/flutter-stripe/flutter_stripe#android\

Using a descendant of Theme.AppCompat for your activity: example, example night theme

We can see that when we click on example night theme, they show the example code that we need to put:

example/android/app/src/main/res/values-night/styles.xml

We should have this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <!-- TODO document the necessary change -->
    <style name="LaunchTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.MaterialComponents">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

When I download the code of my project and I go to the style.xlm of the "values-night" folder I have this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.MaterialComponents">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

We can see that it's not good I have the light theme line "

FlutterFlow / flutterflow-issues