Issue with Google Pay Button Rendering in Light Theme and Theme.AppCompat Error

[carlos-alex]

Description:
There seems to be an issue when using the Google Pay Button with the pay package in Flutter. The button does not render correctly when using the light theme, and there are errors related to the Theme.AppCompat.

Steps to Reproduce:

Add the pay package and necessary dependencies to the Flutter project.
Run the app and observe the rendering issue and log errors.
Expected Behavior:
The Google Pay Button should render correctly with the light theme applied.

Observed Behavior:
The button shows graphical glitches or does not render correctly. Additionally, there are errors in the logs related to using Theme.AppCompat.

Additional Information:

The error message indicates an issue with the attribute at index 0, related to the Theme.AppCompat.
Please investigate this issue to determine the root cause and provide a fix or workaround. Thank you.

Additional Information:

pay package version: pay: ^2.0.0

flutter --version
Flutter 3.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b0850beeb2 (3 weeks ago) • 2024-07-16 21:43:41 -0700
Engine • revision 235db911ba
Tools • Dart 3.4.4 • DevTools 2.34.3

Android Studio Koala | 2024.1.1 Patch 1
Build #AI-241.18034.62.2411.12071903, built on July 10, 2024
Runtime version: 17.0.11+0--11852314 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 11.0
GC: G1 Young Generation, G1 Old Generation
Memory: 4058M
Cores: 24
Registry:
debugger.new.tool.window.layout=true
ide.experimental.ui=true

Relevant code:

Center(
child: GooglePayButton(
paymentConfiguration: paymentConfig,
key: Key(selectedIndex.toString()),

paymentItems: [
  PaymentItem(
    label: 'Total',
    amount: (() {
      final price = packages![selectedIndex].price.toString();
      return price;
    })(),
    status: PaymentItemStatus.final_price,
  )
],

theme: GooglePayButtonTheme.light,
type: GooglePayButtonType.pay,
margin: const EdgeInsets.only(top: 15.0),
onPressed: () {
  setState(() {});
  return;
},
onPaymentResult: (result) async {
  try {
    String res = result.toString();
    log("Payment result: $res");
    String tokenJson = result['methodData']['tokenData']['token'];
    Map<String, dynamic> tokenData = jsonDecode(tokenJson);
    String tokenId = tokenData['id'];

    int amount = convertToIntMultiplyBy100(packages![selectedIndex].price);
    String tokenDesc = result['methodData']['description'];

    await processStripePayment(
      tokenId,
      amount,
      packages![selectedIndex].points,
      tokenDesc,
    );
  } catch (e, s) {
    userFeedback.showFeedbackMessage("Payment Error", e.toString());
    handleError(e, s, 'Payment Error');
  }
},
onError: (error) {
  log("Payment error: $error");
},
loadingIndicator: const Center(
  child: CircularProgressIndicator(),
),

),
),

Manifest Configuration:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<application
    android:enableOnBackInvokedCallback="true"
    android:usesCleartextTraffic="true"
    android:label="xpt"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

    <activity
        android:name=".MainActivity"
        android:exported="true"
        android:launchMode="singleTop"
        android:theme="@style/Theme.AppCompat.Light"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize">

        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>

    <meta-data
        android:name="flutterEmbedding"
        android:value="2" />

    <meta-data
        android:name="com.google.android.gms.wallet.api.enabled"
        android:value="true"/>
</application>

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="sms" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tel" />
    </intent>
    <intent>
        <action android:name="android.intent.action.SENDTO" />
        <data android:scheme="mailto" />
    </intent>
</queries>

Dependencies:

dependencies {
implementation 'com.android.support:multidex:1.0.3'
implementation "androidx.multidex:multidex:2.0.1"
implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.compose.material:material:1.6.8'
implementation 'com.google.android.gms:play-services-wallet:19.4.0'
implementation 'com.google.android.gms:play-services-base:18.5.0'
implementation 'com.stripe:stripe-android:20.37.4'
implementation(platform("com.google.firebase:firebase-bom:33.1.2"))
implementation("com.google.firebase:firebase-crashlytics-ndk")
implementation("com.google.firebase:firebase-analytics")
}

LOG Output

E/ThemeUtils(32156): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/ThemeUtils(32156): View class com.google.android.material.imageview.ShapeableImageView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
W/ResourcesCompat(32156): Failed to inflate ColorStateList, leaving it to the framework
W/ResourcesCompat(32156): java.lang.UnsupportedOperationException: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7b040084 a=-1}, theme={InheritanceMap=[id=0x7b1100abcom.google.android.gms:style/PayButtonLightTheme], Themes=[com.google.android.gms:style/PayButtonLightTheme, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}
W/ResourcesCompat(32156): at android.content.res.TypedArray.getColor(TypedArray.java:529)
W/ResourcesCompat(32156): at m.jf.b(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):18)
W/ResourcesCompat(32156): at m.jf.a(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):24)
W/ResourcesCompat(32156): at m.jb.a(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):126)
W/ResourcesCompat(32156): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):31)
W/ResourcesCompat(32156): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):2)
W/ResourcesCompat(32156): at java.lang.reflect.Constructor.newInstance0(Native Method)
W/ResourcesCompat(32156): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
W/ResourcesCompat(32156): at android.view.LayoutInflater.createView(LayoutInflater.java:866)
W/ResourcesCompat(32156): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1018)
W/ResourcesCompat(32156): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:973)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1135)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1096)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1138)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1096)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1138)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1096)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1138)
W/ResourcesCompat(32156): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1096)
W/ResourcesCompat(32156): at android.view.LayoutInflater.inflate(LayoutInflater.java:694)
W/ResourcesCompat(32156): at android.view.LayoutInflater.inflate(LayoutInflater.java:538)
W/ResourcesCompat(32156): at m.bdv.d(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):337)
W/ResourcesCompat(32156): at m.bdv.b(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):30)
W/ResourcesCompat(32156): at com.google.android.gms.wallet.dynamite.PayButtonCreatorChimeraImpl.newPayButton(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):51)
W/ResourcesCompat(32156): at m.bdl.z(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):43)
W/ResourcesCompat(32156): at m.rz.onTransact(:com.google.android.gms.dynamite_dynamitemodulesc@242835041@24.28.35 (190800-0):21)
W/ResourcesCompat(32156): at android.os.Binder.transact(Binder.java:1183)
W/ResourcesCompat(32156): at com.google.android.gms.internal.wallet.zza.zzb(com.google.android.gms:play-services-wallet@@19.3.0:2)
W/ResourcesCompat(32156): at com.google.android.gms.wallet.button.zze.zzd(com.google.android.gms:play-services-wallet@@19.3.0:4)
W/ResourcesCompat(32156): at com.google.android.gms.wallet.button.zzf.zza(com.google.android.gms:play-services-wallet@@19.3.0:6)
W/ResourcesCompat(32156): at com.google.android.gms.wallet.button.PayButton.initialize(com.google.android.gms:play-services-wallet@@19.3.0:17)
W/ResourcesCompat(32156): at io.flutter.plugins.pay_android.view.PayButtonView.buildPayButton(PayButtonView.kt:61)
W/ResourcesCompat(32156): at io.flutter.plugins.pay_android.view.PayButtonView.(PayButtonView.kt:48)
W/ResourcesCompat(32156): at io.flutter.plugins.pay_android.view.PayButtonViewFactory.create(PayButtonViewFactory.kt:27)
W/ResourcesCompat(32156): at io.flutter.plugin.platform.PlatformViewsController.createPlatformView(PlatformViewsController.java:523)
W/ResourcesCompat(32156): at io.flutter.plugin.platform.PlatformViewsController$1.createForTextureLayer(PlatformViewsController.java:197)
W/ResourcesCompat(32156): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:128)
W/ResourcesCompat(32156): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:55)
W/ResourcesCompat(32156): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:267)
W/ResourcesCompat(32156): at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:292)
W/ResourcesCompat(32156): at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319)
W/ResourcesCompat(32156): at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12)
W/ResourcesCompat(32156): at android.os.Handler.handleCallback(Handler.java:958)
W/ResourcesCompat(32156): at android.os.Handler.dispatchMessage(Handler.java:99)
W/ResourcesCompat(32156): at android.os.Looper.loopOnce(Looper.java:205)
W/ResourcesCompat(32156): at android.os.Looper.loop(Looper.java:294)
W/ResourcesCompat(32156): at android.app.ActivityThread.main(ActivityThread.java:8177)
W/ResourcesCompat(32156): at java.lang.reflect.Method.invoke(Native Method)
W/ResourcesCompat(32156): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:552)
W/ResourcesCompat(32156): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:971)
E/ThemeUtils(32156): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/ThemeUtils(32156): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
I/PlatformViewsController(32156): Hosting view in view hierarchy for platform view: 0
I/PlatformViewsController(32156): PlatformView is using SurfaceProducer backend
W/ConnectionStatusConfig(32156): Dynamic lookup for intent failed for action: com.google.android.gms.wallet.service.BIND

[nisarg107]

I think this might help some way

You could define your own fullscreen theme like so (notice AppCompat in the parent=)

<style name="AppFullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar"> true false </style>

Then set that on the Activity

Note: There might be an AppCompat theme that's already full screen, but don't know immediately