Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

RawGooglePayButton: set up custom height (native PayButton doesn't fill platform view)

Offen
#342 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
dart, flutter, kotlin
Bereich
mobile

Rechercherichtung

Start by reading PayButtonView.kt, where the Android platform view creates and initializes the native PayButton; compare its layout behavior with the Flutter widget sizing described in the report. Check the related platform view tests or add a reproduction for a 64dp parent height. Done means the native button fills the height supplied by Flutter without breaking its content or existing button behavior.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Describe the bug
RawGooglePayButton cannot be made taller than 48dp. When it is wrapped in a SizedBox with a larger height, for example 64, the platform view takes the full 64dp. The native Google Pay button stays 48dp tall at the top of it, with 16dp of empty space below.

The same happens with GooglePayButton, which wraps RawGooglePayButton.

To Reproduce

  1. Add the following widget on an Android device or emulator:
SizedBox(
      width: double.infinity,
      height: 64,
      child: RawGooglePayButton(
        paymentConfiguration: PaymentConfiguration.fromJsonString('''
          {
            "provider": "google_pay",
            "data": {
              "environment": "TEST",
              "apiVersion": 2,
              "apiVersionMinor": 0,
              "allowedPaymentMethods": []
            }
          }
          '''),
        onPressed: () {},
      ),
    );
  1. The button is drawn 48dp tall, not 64dp.

Expected behavior
The button fills the height given by its parent.

Screenshots
Image

Additional context
This problem was already described here but it was closed by author for unknown reasons: https://github.com/google-pay/flutter-plugin/issues/256

Workaround
This is an AI-generated workaround that makes the button fills the height. I can open a PR if the approach is acceptable:

  • In PayButtonView.kt, after payButton.initialize(...), set MATCH_PARENT width and height on the inflated container ViewGroups.
Image

Code:

/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package io.flutter.plugins.pay_android.view

import android.content.Context
import android.view.ViewGroup
import android.view.ViewGroup.LayoutParams.MATCH_PARENT
import com.google.android.gms.wallet.button.ButtonOptions
import com.google.android.gms.wallet.button.ButtonConstants.ButtonTheme
import com.google.android.gms.wallet.button.ButtonConstants.ButtonType
import com.google.android.gms.wallet.button.PayButton
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.platform.PlatformView
import org.json.JSONArray
import org.json.JSONObject

private const val VIEW_TYPE = "plugins.flutter.io/pay/google_pay_button"

private const val METHOD_ON_PRESSED = "onPressed"

internal class PayButtonView(private val context: Context, binaryMessenger: BinaryMessenger, viewId: Int, creationParams: Map<String, Any>) : PlatformView {

    private val payButton: PayButton
    private val methodChannel: MethodChannel

    init {
        // Instantiate method channel
        methodChannel = MethodChannel(binaryMessenger, "$VIEW_TYPE/$viewId");

        // Build pay button
        payButton = PayButton(context)
        buildPayButton(creationParams)
    }

    private fun buildPayButton(buttonParams: Map<String, Any>) {
        val buttonTheme = ButtonThemeFactory.fromString(buttonParams["theme"] as String)
        val buttonType = ButtonTypeFactory.fromString(buttonParams["type"] as String)
        val cornerRadiusDp = buttonParams["cornerRadius"] as Int
        val cornerRadius = (cornerRadiusDp * context.resources.displayMetrics.density).toInt()

        // Parse payment configuration
        val payConfiguration = JSONObject(buttonParams["paymentConfiguration"] as String)
        val allowedPaymentMethods: JSONArray = payConfiguration["allowedPaymentMethods"] as JSONArray

        payButton.initialize(ButtonOptions.newBuilder()
            .setButtonTheme(buttonTheme)
            .setButtonType(buttonType)
            .setCornerRadius(cornerRadius)
            .setAllowedPaymentMethods(allowedPaymentMethods.toString())
            .build())

        stretchToFill(payButton)

        payButton.setOnClickListener {
            methodChannel.invokeMethod(METHOD_ON_PRESSED, null)
        }
    }

    // The inflated button container is wrap_content with a 48dp minimum height, so
    // it must be stretched to follow the height given by the Flutter side. Leaf
    // views (logo, text) keep their own size.
    private fun stretchToFill(group: ViewGroup) {
        group.layoutParams?.let {
            it.width = MATCH_PARENT
            it.height = MATCH_PARENT
            group.layoutParams = it
        }
        for (i in 0 until group.childCount) {
            (group.getChildAt(i) as? ViewGroup)?.let(::stretchToFill)
        }
    }

    override fun getView() = payButton

    override fun dispose() = Unit
}

class ButtonThemeFactory {
    companion object {
        fun fromString(buttonThemeString: String) = when(buttonThemeString) {
            "dark" -> ButtonTheme.DARK
            "light" -> ButtonTheme.LIGHT
            else -> ButtonTheme.DARK
        }
    }
}

class ButtonTypeFactory {
    companion object {
        fun fromString(buttonTypeString: String) = when(buttonTypeString) {
            "pay" -> ButtonType.PAY
            "buy" -> ButtonType.BUY
            "book" -> ButtonType.BOOK
            "donate" -> ButtonType.DONATE
            "checkout" -> ButtonType.CHECKOUT
            "order" -> ButtonType.ORDER
            "plain" -> ButtonType.PLAIN
            "subscribe" -> ButtonType.SUBSCRIBE
            "pix" -> ButtonType.PIX
            else -> ButtonType.BUY
        }
    }
}
Vorherrschende Sprache
Dart
Sterne
180
Forks
144
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus google-pay/flutter-plugin

Alle Issues in google-pay/flutter-plugin

Ähnliche Issues

Weitere Issues zu Dart

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.