You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🔥 "uCreditCard" is a Flutter package that offers a customizable solution for showing the UI of credit cards within your app. Elevate user engagement with captivating flip animations and enhance your app's visual appeal effortlessly!
11
+
🔥 **u_credit_card** is a Flutter package for creating customizable and realistic-looking credit card UI with engaging animations. Elevate the visual appeal of your app and improve user interaction effortlessly!
This will create a credit card user interface with the cardholder's name, card number, and validity date. For more advanced usage, see the following parameters:
|`cardHolderFullName`|`String`| The cardholder's full name. This is a required parameter. |
69
-
|`cardNumber`|`String`| The full credit card number. This is a required parameter. |
70
-
|`validThru`|`String`| The validity date of the card. It must be in the format "mm/yy". This is a required parameter. |
71
-
|`validFrom`|`String`| The valid from the date of the card. It must be in the format "mm/yy". This parameter is optional. |
72
-
|`topLeftColor`|`Color`| The top-left gradient color of the card. The default value is `Colors.purple`. |
73
-
|`bottomRightColor`|`Color`| The bottom-right gradient color of the card. If not specified, a darker version of the `topLeftColor` will be used. |
74
-
|`doesSupportNfc`|`bool`| A boolean value to indicate if the card supports NFC feature. The default value is `true`. |
75
-
|`placeNfcIconAtTheEnd`|`bool`| A boolean value to place the NFC icon at the opposite side of the chip. The default value is `false`. |
76
-
|`cardType`|`CardType`| Specify the type of the card to display. By default, the value is set to `CardType.credit`. You can set it to `CardType.other` if you prefer not to specify a card type. This is optional. |
77
-
|`creditCardType`|`CreditCardType`| Specify the type of the credit card payment network logo to display. You can set it to `CreditCardType.none` if you prefer not to specify a card type and not show on the card UI. This is optional. |
78
-
|`cardProviderLogo`|`Widget`| Provide a widget for the logo of the card provider. If this parameter is not set, the card will be displayed without a logo. This is optional. |
79
-
|`cardProviderLogoPosition`|`CardProviderLogoPosition`| Set the position of the card provider logo on the card. The default value is `CardProviderLogoPosition.right`. You can set it to `CardProviderLogoPosition.left` or `CardProviderLogoPosition.right`. This is optional. |
80
-
|`backgroundDecorationImage`|`DecorationImage`| Set a background image for the card. This parameter supports both asset and network images. If this parameter is not set, the card will be displayed without a background image. This is optional. |
81
-
|`showValidThru`|`bool`| Indicates whether to show the "Valid Thru" section on the card. If set to `false`, the "Valid Thru" section will be hidden. By default, this value is `true`. |
82
-
|`showValidFrom`|`bool`| Indicates whether to show the "Valid From" section on the card. If set to `false`, the "Valid From" section will be hidden. By default, this value is `true`. |
83
-
|`currencySymbol`|`String`| The symbol used to represent the currency. By default, it uses US Dollar sign ($). |
84
-
|`balance`|`bool`| The balance amount. By default, this value is 0. |
85
-
|`showBalance`|`bool`| A boolean flag indicating whether to show the balance. By default, this value is `false`. |
86
-
|`enableFlipping`|`bool`| A boolean flag indicating whether card flipping is enabled. By default, this value is `false`. |
87
-
| `autoHideBalance` | `bool` | A boolean flag indicating to enable the auto hiding balance feature. In this case, the placeholder will be shown instead of the balance. By default it is `false`.
88
-
|`cvvNumber`|`bool`| CVV number of the card, use \*\*\* if you think this is sensitive, by default it will show \*\*\*. |
89
-
| `disableHapticFeedBack` | `bool` | A boolean flag to disable the haptic feedback. Example — card flipping or tapping on placeholder to see balance
90
-
| `width` | `double` | A double value to set the width of the card, maximum value is 300.
|`cardHolderFullName`|`String`| The cardholder's full name. **Required**. |
65
+
|`cardNumber`|`String`| The full credit card number. **Required**. |
66
+
|`validThru`|`String`| The expiration date in "MM/YY" format. **Required**. |
67
+
|`validFrom`|`String`| The "Valid From" date in "MM/YY" format. Optional. |
68
+
|`topLeftColor`|`Color`| Top-left gradient color. Defaults to `Colors.purple`. |
69
+
|`bottomRightColor`|`Color`| Bottom-right gradient color. Defaults to a darker shade of `topLeftColor`. |
70
+
|`doesSupportNfc`|`bool`| Displays NFC icon if set to `true`. Defaults to `true`. |
71
+
|`placeNfcIconAtTheEnd`|`bool`| Places NFC icon at the opposite side of the chip if set to `true`. Defaults to `false`. |
72
+
|`cardType`|`CardType`| Specifies card type. Defaults to `CardType.credit`. You can set it to `CardType.other` if you prefer not to specify a card type. This is optional. |
73
+
|`creditCardType`|`CreditCardType`| Specifies the credit card payment network logo. You can set it to `CreditCardType.none` if you prefer not to specify a card type and not show on the card UI. This is optional. |
74
+
|`cardProviderLogo`|`Widget`| Adds a provider logo. Optional. |
75
+
|`backgroundDecorationImage`|`DecorationImage`| Sets a background image. Optional. |
76
+
|`showValidThru`|`bool`| Toggles "Valid Thru" section. Defaults to `true`. |
77
+
|`currencySymbol`|`String`| Currency symbol. Defaults to `$`. |
78
+
|`balance`|`double`| Balance amount. Defaults to `0.0`. |
79
+
|`showBalance`|`bool`| Toggles the balance display. Defaults to `false`. |
80
+
|`enableFlipping`|`bool`| Enables card flipping. Defaults to `false`. |
81
+
|`autoHideBalance`|`bool`| Hides balance with a placeholder until tapped. Defaults to `false`. |
82
+
|`cvvNumber`|`String`| CVV number shown as `***`. |
83
+
|`disableHapticFeedBack`|`bool`| Disables haptic feedback on interactions. |
84
+
|`width`|`double`| Width of the card, up to a max of 300. |
85
+
|`shouldMaskCardNumber`|`bool`| Masks middle digits of the card number if set to `true`. Defaults to `true`. |
Get ready to create a sleek and stylish credit card interface with just a few lines of code! With this package, you can easily customize the cardholder's name, card number, validity dates, and gradient colors to make it uniquely yours.
107
-
108
100
By default, the card will have a chic blue gradient and an NFC icon. But don't worry, if you don't want the NFC icon, simply pass `doesSupportNfc: false`.
109
101
110
102
Want to switch things up and place the NFC icon on the opposite side of the chip? No problem! Just enable it by passing `placeNfcIconAtTheEnd: true`, but remember to also pass `doesSupportNfc: true`.
@@ -242,10 +234,6 @@ CreditCardUi(
242
234
243
235
---
244
236
245
-
## Inspiration
246
-
247
-
There are already many credit card packages out there, but none of them look realistic. So, I've decided to create something that will look the same as our cards in real life. Additionally, this project was inspired by a [Native Android library](https://github.com/vinaygaba/CreditCardView).
0 commit comments