diff --git a/CHANGELOG.md b/CHANGELOG.md index 39dc450..5fab529 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 3.0.1 - Sep 28, 2021 [Unreleased] +- Fixed [#57](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues/57) - Can we specify a custom card type logos + ## 3.0.0 - Sep 23, 2021 - Glassmorphism UI. diff --git a/README.md b/README.md index d207dbb..eb1af7f 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,16 @@ import 'package:flutter_credit_card/flutter_credit_card.dart'; isChipVisible: true, isSwipeGestureEnabled: true, animationDuration: Duration(milliseconds: 1000), + customCardIcons: [ + CustomCardTypeImage( + cardType: CardType.mastercard, + cardImage: Image.asset( + 'assets/mastercard.png', + height: 48, + width: 48, + ), + ), + ], ), ``` diff --git a/example/assets/mastercard.png b/example/assets/mastercard.png new file mode 100644 index 0000000..f6e58f4 Binary files /dev/null and b/example/assets/mastercard.png differ diff --git a/example/lib/main.dart b/example/lib/main.dart index db5d043..396caa3 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -77,6 +77,16 @@ class MySampleState extends State { useBackgroundImage ? 'assets/card_bg.png' : null, isSwipeGestureEnabled: true, onCreditCardWidgetChange: (CreditCardBrand creditCardBrand) {}, + customCardIcons: [ + CustomCardTypeImage( + cardType: CardType.mastercard, + cardImage: Image.asset( + 'assets/mastercard.png', + height: 48, + width: 48, + ), + ), + ], ), Expanded( child: SingleChildScrollView( diff --git a/lib/credit_card_widget.dart b/lib/credit_card_widget.dart index 03ead61..f0e50b4 100644 --- a/lib/credit_card_widget.dart +++ b/lib/credit_card_widget.dart @@ -5,6 +5,7 @@ import 'package:flutter/material.dart'; import 'credit_card_animation.dart'; import 'credit_card_background.dart'; import 'credit_card_brand.dart'; +import 'custom_card_type_image.dart'; import 'glassmorphism_config.dart'; const Map CardTypeIconAsset = { @@ -37,6 +38,7 @@ class CreditCardWidget extends StatefulWidget { this.glassmorphismConfig, this.isChipVisible = true, this.isSwipeGestureEnabled = true, + this.customCardIcons = const [], required this.onCreditCardWidgetChange}) : super(key: key); @@ -63,6 +65,7 @@ class CreditCardWidget extends StatefulWidget { final String labelExpiredDate; final CardType? cardType; + final List customCardIcons; @override _CreditCardWidgetState createState() => _CreditCardWidgetState(); @@ -523,69 +526,91 @@ class _CreditCardWidgetState extends State return cardType; } - Widget getCardTypeImage(CardType? cardType) => Image.asset( + Widget getCardTypeImage(CardType? cardType) { + final List customCardImage = getCustomCardTypeIcon(cardType!); + if(customCardImage.isNotEmpty){ + return customCardImage.first.cardImage; + } else { + return Image.asset( CardTypeIconAsset[cardType]!, height: 48, width: 48, package: 'flutter_credit_card', ); + } + } - // This method returns the icon for the visa card type if found - // else will return the empty container + // This method returns the icon for the visa card type if found + // else will return the empty container Widget getCardTypeIcon(String cardNumber) { Widget icon; - switch (detectCCType(cardNumber)) { - case CardType.visa: - icon = Image.asset( - 'icons/visa.png', - height: 48, - width: 48, - package: 'flutter_credit_card', - ); - isAmex = false; - break; - - case CardType.americanExpress: - icon = Image.asset( - 'icons/amex.png', - height: 48, - width: 48, - package: 'flutter_credit_card', - ); - isAmex = true; - break; - - case CardType.mastercard: - icon = Image.asset( - 'icons/mastercard.png', - height: 48, - width: 48, - package: 'flutter_credit_card', - ); - isAmex = false; - break; - - case CardType.discover: - icon = Image.asset( - 'icons/discover.png', - height: 48, - width: 48, - package: 'flutter_credit_card', - ); - isAmex = false; - break; - - default: - icon = Container( - height: 48, - width: 48, - ); - isAmex = false; - break; + final CardType ccType = detectCCType(cardNumber); + final List customCardTypeIcon = getCustomCardTypeIcon(ccType); + if (customCardTypeIcon.isNotEmpty) { + icon = customCardTypeIcon.first.cardImage; + isAmex = ccType == CardType.americanExpress; + } else { + switch (ccType) { + case CardType.visa: + icon = Image.asset( + CardTypeIconAsset[ccType]!, + height: 48, + width: 48, + package: 'flutter_credit_card', + ); + isAmex = false; + break; + + case CardType.americanExpress: + icon = Image.asset( + CardTypeIconAsset[ccType]!, + height: 48, + width: 48, + package: 'flutter_credit_card', + ); + isAmex = true; + break; + + case CardType.mastercard: + icon = Image.asset( + CardTypeIconAsset[ccType]!, + height: 48, + width: 48, + package: 'flutter_credit_card', + ); + isAmex = false; + break; + + case CardType.discover: + icon = Image.asset( + CardTypeIconAsset[ccType]!, + height: 48, + width: 48, + package: 'flutter_credit_card', + ); + isAmex = false; + break; + + default: + icon = Container( + height: 48, + width: 48, + ); + isAmex = false; + break; + } } return icon; } + + List getCustomCardTypeIcon(CardType currentCardType) { + final List customCardTypeIcon = widget.customCardIcons + .where((CustomCardTypeImage element) => + element.cardType == currentCardType) + .toList(); + return customCardTypeIcon; + } } class MaskedTextController extends TextEditingController { diff --git a/lib/custom_card_type_image.dart b/lib/custom_card_type_image.dart new file mode 100644 index 0000000..e4328b5 --- /dev/null +++ b/lib/custom_card_type_image.dart @@ -0,0 +1,12 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_credit_card/credit_card_widget.dart'; + +class CustomCardTypeImage { + CustomCardTypeImage({ + required this.cardType, + required this.cardImage, + }); + + CardType cardType; + Widget cardImage; +} diff --git a/lib/flutter_credit_card.dart b/lib/flutter_credit_card.dart index 9f246bd..296ad58 100644 --- a/lib/flutter_credit_card.dart +++ b/lib/flutter_credit_card.dart @@ -4,3 +4,4 @@ export 'credit_card_form.dart'; export 'credit_card_model.dart'; export 'credit_card_widget.dart'; export 'glassmorphism_config.dart'; +export 'custom_card_type_image.dart';