SimformSolutionsPvtLtd/flutter_credit_card

Expiry date with validation helper not aligned with valid CVV

Closed this issue · 2 comments

Describe the bug
When the expiry date of a card is invalid, but the CVV is valid, the helptext underneath the expiry date nudges it out of alignment with the CVV text field.

To Reproduce
Steps to reproduce the behavior:

  1. Instantiate a CreditCardForm
  2. Purposefully introduce an invalid expiry date, but valid CVV
  3. Validate.

Expected behavior
Expiry date and CVV always aligned, regardless of validation errors

Screenshots
image

Desktop (please complete the following information):
-Windows 11

Smartphone (please complete the following information):
-Android Emulator. Pixel 4a

Comments
Not a particularly terrible issue, but I would still consider this a visual bug.
The fix would probably be as simple as setting crossAxisAlignment on the row containing both expiry date and cvv fields.

@levitanong I think it's default TextFormField behaviour where if the TextFormFiled will have an error it goest slide up and in the screenshots which you have attached above we can simply identify that Expiry date is having an error and CVV is correct... so if either both will have an error or both are valid then both will be aligned properly. So it's a basic flutter widget behaviour... Please let me know if you need information regarding the same.

I’m closing this issue because it's the default behaviour of the flutter TextFormField while there is a validation error.