CardField widget does not properly initiate in the example app

[AneekRahman]

Describe the bug
CardField widget does not properly initiate. As a result, it cannot get the card information and shows an error icon at the side. This happens at the end when all card information is provided.

To Reproduce
Steps to reproduce the behavior:

1. Go to "Card Field themes" under "Card Payments" section in the flutter_stripe example app.
2. Enter proper card info (card number, dates, cvc. I tried with both test cards and an actual one)
3. Finally, an error icon shows where the card company icon should be.

Expected behavior
A clear and concise description of what you expected to happen.

Smartphone / tablet

• Device: Android A50
• OS: Android 11
• Package version: ^3.2.0
• Flutter version: 3.0.4

Additional context
This is the stack trace I get right after I tap the "Card Field themes" button to open the page:

I/System.out(29176): (HTTPLog)-Static: isSBSettingEnabled false
E/FrameEvents(29176): updateAcquireFence: Did not find frame.
W/View    (29176): requestLayout() improperly called by android.widget.ImageView{48b6c9c V.ED..... ......ID 0,0-84,55 #7f08015a app:id/icon} during layout: running second layout pass
W/View    (29176): requestLayout() improperly called by android.widget.FrameLayout{71cf6a5 VFE...... ......ID 156,30-930,92 #7f0800c4 app:id/container} during layout: running second layout pass
W/View    (29176): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{3197a7a V.ED..... ......ID 0,0-416,62 #7f08009f app:id/card_number_text_input_layout} during layout: running second layout pass
W/View    (29176): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{986822b V.ED..... ......ID 525,0-682,62 #7f080127 app:id/expiry_date_text_input_layout} during layout: running second layout pass
W/View    (29176): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{230b688 V.ED..... ......ID 2625,0-2625,62 #7f0800d5 app:id/cvc_text_input_layout} during layout: running second layout pass
E/FrameEvents(29176): updateAcquireFence: Did not find frame.
D/InputMethodManager(29176): prepareNavigationBarInfo() DecorView@c59e443[MainActivity]
D/InputMethodManager(29176): getNavigationBarColor() -16711423
V/InputMethodManager(29176): Starting input: tba=com.flutter.stripe.example ic=com.stripe.android.view.StripeEditText$SoftDeleteInputConnection@ed2161e mNaviBarColor -16711423 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
D/InputMethodManager(29176): startInputInner - Id : 0
I/InputMethodManager(29176): startInputInner - mService.startInputOrWindowGainedFocus
D/InputTransport(29176): Input channel constructed: 'ClientS', fd=136
D/InputTransport(29176): Input channel destroyed: 'ClientS', fd=101

I printed what the onCardChanged(details) was like this:

onCardChanged: (card) {
  print("Card Details: " + card.toString());
},

and this is what I got:

I/flutter ( 5195): Card Details: CardFieldInputDetails(complete: true, last4: null, expiryMonth: 4, expiryYear: 54, postalCode: null, brand: null, number: null, cvc: null, validExpiryDate: CardValidationState.Valid, validCVC: CardValidationState.Valid, validNumber: CardValidationState.Valid)

[remonh87]

duplicate of #817