diff --git a/CHANGELOG.md b/CHANGELOG.md index 345ffa5..62a4530 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,113 +2,115 @@ All notable changes to this project will be documented in this file. -## [1.3.1] 🛠️ +## [1.4.0] 🔧 -### Fix - -- Fix invisible card issue when no width is defined - -## [1.3.0] 🛠️ - -### Deprecated parameters +### Features +- Added `shouldMaskCardNumber` parameter to control the masking of the card number. -- `scale` is deprecated in 1.3.0, will be removed on later version, use width parameter instead +## [1.3.1] 🐞 -### Feature +### Fixes +- Resolved an issue with the card being invisible when no width is defined. -- Added a zoom out effect animation while card flipping. +## [1.3.0] 🛑 -## [1.2.2] 🛠️ +### Deprecated +- `scale` parameter is deprecated and will be removed in a future version. Use the `width` parameter instead. -### Hot fixes +### Features -- Workflow fixed +- Introduced a zoom-out effect animation during card flipping. ## [1.2.1] 🛠️ -### Hot fixes - -- Fixed asset path warning +### Hot Fixes +- Resolved asset path warnings. ## [1.2.0] 🚀 ### Features - ✨ Added the ability to show balances and flipping animations on cards. -- Introduced parameters: `showBalance`, `balance`, `cvvNumber`, `enableFlipping`, `autoHideBalance`, `disableHapticFeedback`, etc. +- Introduced new parameters: + - `showBalance` + - `balance` + - `cvvNumber` + - `enableFlipping` + - `autoHideBalance` + - `disableHapticFeedback` ## [1.1.0] 🚀 ### Features -- ✨ Added the ability to `showValidFrom` and `showValidThru` to hide and show the dates. -- `disableShowingCardLogo` has been completely removed. To achieve the same effect, use `creditCardType: CreditCardType.none` instead. +- ✨ Added `showValidFrom` and `showValidThru` parameters to control visibility of validity dates. +- Removed `disableShowingCardLogo`. Use `creditCardType: CreditCardType.none` instead to achieve the same effect. ## [1.0.7] 🔄 ### Features -- 🚀 Deprecated `disableShowingCardLogo:` property. -- ✨ Added `creditCardType` to override the logo. You can now set `creditCardType: CreditCardType.none` to disable showing the card logo. +- 🚀 Deprecated `disableShowingCardLogo` property. +- ✨ Added `creditCardType` parameter to override the logo. Set `creditCardType: CreditCardType.none` to disable the card logo. ## [1.0.6] 🛠️ ### Features -- ✨ Added `disableShowingCardLogo:` property to hide the card logo. +- ✨ Introduced `disableShowingCardLogo` property to hide the card logo. -## [1.0.5] 🛠️ +## [1.0.5] 📝 ### Improvements -- 📝 Improved the readme. +- 📖 Enhanced the README documentation. -## [1.0.4] 🛠️ +## [1.0.4] 🔧 ### Fixes - 🐛 Fixed a bug with card numbers containing spaces. -## [1.0.3] 🛠️ +## [1.0.3] ⚙️ ### Fixes -- 🐛 Made card number length flexible. +- 🐛 Made the card number length flexible. - 🚀 Optimized the grouping algorithm for improved performance and accuracy. ## [1.0.2] 🖼️ ### Additions -- 📸 Added the background image on card feature. -- 🏢 Added the ability to specify the card company logo. -- 🆔 Type of card can now be specified. +- 📸 Added a background image feature for cards. +- 🏦 Introduced the ability to specify the card company logo. +- 🆔 Enabled specification of the type of card. -## [1.0.1] 📗 +## [1.0.1] 📝 ### Additions -- 📝 Updated metadata. +- 📖 Updated package metadata. -## [1.0.0+5] 👏 +## [1.0.0+5] 🎉 ### Additions -- 📚 Updated documentation. +- 📚 Enhanced documentation. ## [1.0.0+4] 🚀 ### Additions - 📚 Updated documentation. -- 🎉 Added the new property `placeNfcIconAtTheEnd` to place the NFC icon at the opposite side of the Chip. -- 💄 Correctly placed the Chip. +- 🎉 Added the `placeNfcIconAtTheEnd` property to position the NFC icon at the opposite side of the Chip. +- 💄 Correctly positioned the Chip on the card. -## [1.0.0+3] 🎉 +## [1.0.0+3] 🎊 ### Additions -- 📸 Added an image in the `README.md` file. +- 📸 Included an image in the `README.md` file. ## [1.0.0+2] 📝 diff --git a/README.md b/README.md index 17c6184..041dd6c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# uCreditCard 💳 +# 💳 u_credit_card: ^1.4.0 ## Credit Card UI as Flutter Widget 💎 @@ -8,7 +8,7 @@ [![Code size](https://img.shields.io/github/languages/code-size/utpal-barman/u-credit-card-flutter?logo=github&logoColor=white)](https://github.com/utpal-barman/u-credit-card-flutter) [![License](https://img.shields.io/github/license/utpal-barman/u-credit-card-flutter?logo=open-source-initiative&logoColor=green)](https://github.com/utpal-barman/u-credit-card-flutter/blob/main/LICENSE) -🔥 "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! +🔥 **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!

@@ -20,36 +20,32 @@ - [Pub Package](https://pub.dev/packages/u_credit_card) - [GitHub Repository](https://github.com/utpal-barman/u-credit-card-flutter) -## Getting Started: Installation 💻 +## Installation 💻 -**👉 To start using Credit Card UI you must have the [Flutter SDK](https://docs.flutter.dev/get-started/install) installed on your machine.** +1. **Add** `u_credit_card` to your `pubspec.yaml`: -Add `u_credit_card` to your `pubspec.yaml`: + ```yaml + dependencies: + u_credit_card: ^1.4.0 + ``` -```yaml -dependencies: - u_credit_card: ^1.3.1 -``` - -Install it: +2. **Install** the package: -```sh -flutter packages get -``` - ---- + ```sh + flutter packages get + ``` ## Usage To use the `CreditCardUi()` widget, import the package: -``` dart +```dart import 'package:u_credit_card/u_credit_card.dart'; ``` -Create widget of `CreditCardUi(...)` with the required parameters: +Create a `CreditCardUi(...)` widget with the required parameters: -``` dart +```dart CreditCardUi( cardHolderFullName: 'John Doe', cardNumber: '1234567812345678', @@ -59,39 +55,38 @@ CreditCardUi( u_credit_card_basic_setup -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: - -### Parameters - -| Name | Type | Description | -|-----------------------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `cardHolderFullName` | `String` | The cardholder's full name. This is a required parameter. | -| `cardNumber` | `String` | The full credit card number. This is a required parameter. | -| `validThru` | `String` | The validity date of the card. It must be in the format "mm/yy". This is a required parameter. | -| `validFrom` | `String` | The valid from the date of the card. It must be in the format "mm/yy". This parameter is optional. | -| `topLeftColor` | `Color` | The top-left gradient color of the card. The default value is `Colors.purple`. | -| `bottomRightColor` | `Color` | The bottom-right gradient color of the card. If not specified, a darker version of the `topLeftColor` will be used. | -| `doesSupportNfc` | `bool` | A boolean value to indicate if the card supports NFC feature. The default value is `true`. | -| `placeNfcIconAtTheEnd` | `bool` | A boolean value to place the NFC icon at the opposite side of the chip. The default value is `false`. | -| `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. | -| `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. | -| `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. | -| `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. | -| `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. | -| `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`. | -| `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`. | -| `currencySymbol` | `String` | The symbol used to represent the currency. By default, it uses US Dollar sign ($). | -| `balance` | `bool` | The balance amount. By default, this value is 0. | -| `showBalance` | `bool` | A boolean flag indicating whether to show the balance. By default, this value is `false`. | -| `enableFlipping` | `bool` | A boolean flag indicating whether card flipping is enabled. By default, this value is `false`. | -| `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`. -| `cvvNumber` | `bool` | CVV number of the card, use \*\*\* if you think this is sensitive, by default it will show \*\*\*. | -| `disableHapticFeedBack` | `bool` | A boolean flag to disable the haptic feedback. Example — card flipping or tapping on placeholder to see balance -| `width` | `double` | A double value to set the width of the card, maximum value is 300. - -#### Example +--- -``` dart +## Parameters + +| Name | Type | Description | +|-----------------------------|----------------------------|---------------------------------------------------------------------------------------------------------------------| +| `cardHolderFullName` | `String` | The cardholder's full name. **Required**. | +| `cardNumber` | `String` | The full credit card number. **Required**. | +| `validThru` | `String` | The expiration date in "MM/YY" format. **Required**. | +| `validFrom` | `String` | The "Valid From" date in "MM/YY" format. Optional. | +| `topLeftColor` | `Color` | Top-left gradient color. Defaults to `Colors.purple`. | +| `bottomRightColor` | `Color` | Bottom-right gradient color. Defaults to a darker shade of `topLeftColor`. | +| `doesSupportNfc` | `bool` | Displays NFC icon if set to `true`. Defaults to `true`. | +| `placeNfcIconAtTheEnd` | `bool` | Places NFC icon at the opposite side of the chip if set to `true`. Defaults to `false`. | +| `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. | +| `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. | +| `cardProviderLogo` | `Widget` | Adds a provider logo. Optional. | +| `backgroundDecorationImage` | `DecorationImage` | Sets a background image. Optional. | +| `showValidThru` | `bool` | Toggles "Valid Thru" section. Defaults to `true`. | +| `currencySymbol` | `String` | Currency symbol. Defaults to `$`. | +| `balance` | `double` | Balance amount. Defaults to `0.0`. | +| `showBalance` | `bool` | Toggles the balance display. Defaults to `false`. | +| `enableFlipping` | `bool` | Enables card flipping. Defaults to `false`. | +| `autoHideBalance` | `bool` | Hides balance with a placeholder until tapped. Defaults to `false`. | +| `cvvNumber` | `String` | CVV number shown as `***`. | +| `disableHapticFeedBack` | `bool` | Disables haptic feedback on interactions. | +| `width` | `double` | Width of the card, up to a max of 300. | +| `shouldMaskCardNumber` | `bool` | Masks middle digits of the card number if set to `true`. Defaults to `true`. | + +### Example + +```dart CreditCardUi( cardHolderFullName: 'John Doe', cardNumber: '1234567812345678', @@ -100,11 +95,8 @@ CreditCardUi( topLeftColor: Colors.blue, ), ``` - u_credit_card_nfc_basic -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. - 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`. 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( --- -## Inspiration - -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). - ## Contributor diff --git a/lib/src/u_credit_card.dart b/lib/src/u_credit_card.dart index c7ac842..8a68487 100644 --- a/lib/src/u_credit_card.dart +++ b/lib/src/u_credit_card.dart @@ -94,6 +94,7 @@ class CreditCardUi extends StatelessWidget { this.enableFlipping = false, this.cvvNumber = '***', this.disableHapticFeedBack = false, + this.shouldMaskCardNumber = true, }); /// Full Name of the Card Holder. @@ -207,7 +208,7 @@ class CreditCardUi extends StatelessWidget { /// A boolean flag indicating to enable the auto hiding balance feature. /// - /// In this case, the placeholder will be shown insteade of the balance. + /// In this case, the placeholder will be shown instead of the balance. final bool? autoHideBalance; /// CVV number of the card, use *** if you think this is sensitive, @@ -218,10 +219,17 @@ class CreditCardUi extends StatelessWidget { /// Example — card flipping or tapping on placeholder to see balance final bool? disableHapticFeedBack; + /// Determines whether to display the full card number to the user. + /// Displaying the full card number is not recommended due to its sensitivity. + /// By default, this value is `true` and the middle digits are masked with + /// asterisks. + final bool shouldMaskCardNumber; + @override Widget build(BuildContext context) { - final cardNumberMasked = CreditCardHelper.maskCreditCardNumber( + final cardNumberFormated = CreditCardHelper.maskAndFormatCreditCardNumber( cardNumber.replaceAll(' ', '').replaceAll('-', ''), + shouldMaskCardNumber: shouldMaskCardNumber, ); final validFromMasked = validFrom == null @@ -241,7 +249,7 @@ class CreditCardUi extends StatelessWidget { Widget cardLogoWidget; final cardLogoString = CreditCardHelper.getCardLogoFromCardNumber( - cardNumber: cardNumberMasked, + cardNumber: cardNumberFormated, ); if (cardLogoString.isEmpty || creditCardType == CreditCardType.none) { @@ -254,7 +262,7 @@ class CreditCardUi extends StatelessWidget { } else { cardLogoWidget = Image.asset( CreditCardHelper.getCardLogoFromCardNumber( - cardNumber: cardNumberMasked, + cardNumber: cardNumberFormated, ), package: UiConstants.packageName, ); @@ -325,7 +333,7 @@ class CreditCardUi extends StatelessWidget { child: AnimatedSwitcher( duration: UiConstants.animationDuration, child: Container( - key: ValueKey(cardNumberMasked), + key: ValueKey(cardNumberFormated), child: cardLogoWidget, ), ), @@ -342,9 +350,9 @@ class CreditCardUi extends StatelessWidget { top: 108, left: 20, child: CreditCardText( - cardNumberMasked.length > 20 - ? cardNumberMasked.substring(0, 20) - : cardNumberMasked, + cardNumberFormated.length > 20 + ? cardNumberFormated.substring(0, 20) + : cardNumberFormated, ), ), ], @@ -493,9 +501,9 @@ class _AnimatedFlippingCardState extends State HapticFeedback.mediumImpact(); } - final swippedLeft = details.velocity.pixelsPerSecond.dx < 1; + final swipedLeft = details.velocity.pixelsPerSecond.dx < 1; - if (swippedLeft) { + if (swipedLeft) { // Do something } diff --git a/lib/src/utils/credit_card_helper.dart b/lib/src/utils/credit_card_helper.dart index 32c9ee5..a2b0786 100644 --- a/lib/src/utils/credit_card_helper.dart +++ b/lib/src/utils/credit_card_helper.dart @@ -7,22 +7,27 @@ import 'package:u_credit_card/u_credit_card.dart'; class CreditCardHelper { CreditCardHelper._(); - /// Masks Credit Card number with asterisks - static String maskCreditCardNumber(String cardNumber) { + /// Masks Credit Card number with asterisks. + static String maskAndFormatCreditCardNumber( + String cardNumber, { + bool shouldMaskCardNumber = true, + }) { final length = cardNumber.length; - var maskedNumber = ''; - - for (var i = 0; i < length; i++) { - if (i < 4 || (i >= 12)) { - // keep the first 4 digits and the last 4 digits visible - maskedNumber += cardNumber[i]; - } else { - // mask the digits between 4 and the length-4 with asterisks - maskedNumber += '*'; + + if (shouldMaskCardNumber && length >= 12) { + var maskedNumber = ''; + for (var i = 0; i < length; i++) { + if (i < 4 || (i >= 12)) { + // keep the first 4 digits and the last 4 digits visible + maskedNumber += cardNumber[i]; + } else { + // mask the digits between 4 and the length-4 with asterisks + maskedNumber += '*'; + } } + return groupDigits(maskedNumber); } - - return groupDigits(maskedNumber); + return groupDigits(cardNumber); } /// Group the masked number in sets of 4 digits. diff --git a/pubspec.yaml b/pubspec.yaml index aba47c6..86d78c6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,9 +1,14 @@ name: u_credit_card description: uCreditCard - Easy to use beautiful Card UI Flutter Package. -version: 1.3.1 +version: 1.4.0 homepage: "https://github.com/utpal-barman/u-credit-card-flutter" repository: "https://github.com/utpal-barman/u-credit-card-flutter" -topics: [creditcard, credit, card, ucreditcard, ui] +topics: + - creditcard + - credit + - card + - ucreditcard + - debitcard environment: sdk: ">=3.3.0 <4.0.0" diff --git a/test/src/credit_card_logic_test.dart b/test/src/credit_card_logic_test.dart new file mode 100644 index 0000000..6b24d63 --- /dev/null +++ b/test/src/credit_card_logic_test.dart @@ -0,0 +1,30 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:u_credit_card/src/utils/credit_card_helper.dart'; + +void main() { + group('CreditCardHelper.maskAndFormatCreditCardNumber', () { + test('masks and formats the card number correctly', () { + const fakeCardNumber = '1234567812345678'; + const expectedOutput = '1234 **** **** 5678'; + + final maskedNumber = CreditCardHelper.maskAndFormatCreditCardNumber( + fakeCardNumber, + ); + + expect(maskedNumber, expectedOutput); + }); + + test('returns the unmasked card number correctly when masking is disabled', + () { + const fakeCardNumber = '1234567812345678'; + const expectedOutput = '1234 5678 1234 5678'; + + final unmaskedNumber = CreditCardHelper.maskAndFormatCreditCardNumber( + fakeCardNumber, + shouldMaskCardNumber: false, + ); + + expect(unmaskedNumber, expectedOutput); + }); + }); +}