cardBgColor is correct on app only, and the CreditCardWidget vertical height is stretched on Desktop web, but not mobile web

[Zelfapp]

CreditCardWidget in app

CreditCardWidget on Desktop Chrome 101 on Linux web

CreditCardWidget on Chrome mobile web

My CreditCardWidget and CreditCardForm code. Also, the cardBgColor: kAvailableSeat, referenced is const Color kAvailableSeat = Color(0xFF162A52);.

SizedBox(
  width: 500,
  child: CreditCardWidget(
    cardNumber: cardNumber,
    expiryDate: expiryDate,
    cardHolderName: cardHolderName,
    cvvCode: cvvCode,
    showBackView: isCvvFocused,
    obscureCardNumber: true,
    obscureCardCvv: true,
    isHolderNameVisible: true,
    cardBgColor: kAvailableSeat,
    isSwipeGestureEnabled: true,
    onCreditCardWidgetChange:
        (CreditCardBrand
            creditCardBrand) {},
  ),
),
ConstrainedBox(
  constraints: const BoxConstraints(
    maxWidth: 500,
  ),
  child: CreditCardForm(
    formKey: _creditCardFormKey,
    obscureCvv: true,
    obscureNumber: true,
    cardNumber: cardNumber,
    cvvCode: cvvCode,
    isHolderNameVisible: true,
    isCardNumberVisible: true,
    isExpiryDateVisible: true,
    cardHolderName: cardHolderName,
    expiryDate: expiryDate,
    themeColor: kAvailableSeat,
    textColor: kAvailableSeat,
    cardNumberDecoration:
        kInputStringFields.copyWith(
      hintText:
          'XXXX XXXX XXXX XXXX',
      labelText: 'Number',
    ),
    expiryDateDecoration:
        kInputStringFields.copyWith(
      hintText: 'MMYY',
      labelText: 'Expired Date',
    ),
    cvvCodeDecoration:
        kInputStringFields.copyWith(
      hintText: 'XXX',
      labelText: 'CVV',
    ),
    cardHolderDecoration:
        kInputStringFields.copyWith(
      hintText: 'Card holder name',
      labelText: 'Card Holder',
    ),
    onCreditCardModelChange:
        onCreditCardModelChange,
  ),
),

Desktop

• Chrome 101 on Linux

Smartphone

• Pixel 6 Chrome

[Zelfapp]

FYI, putting CreditCardWidget in ConstrainedBox fixed the height issue on Desktop web, but the cardBgColor is still not working on web.

ConstrainedBox(
  constraints: const BoxConstraints(
    maxWidth: 500,
    maxHeight: 300,
  ),
  child: CreditCardWidget(
    cardNumber: cardNumber,
    expiryDate: expiryDate,
    cardHolderName: cardHolderName,
    cvvCode: cvvCode,
    showBackView: isCvvFocused,
    obscureCardNumber: true,
    obscureCardCvv: true,
    isHolderNameVisible: true,
    cardBgColor: kAvailableSeat,
    isSwipeGestureEnabled: true,
    onCreditCardWidgetChange:
        (CreditCardBrand
            creditCardBrand) {},
  ),
),

[kavantrivedi]

I’m closing this issue because it has been inactive for months. This probably means that it is not reproducible or has been fixed in a newer version. Please reopen if you still encounter this issue with the [flutter_credit_card: ^3.0.4]
Also, You can also contribute directly by providing a patch or solution. Thank you!