From 7d8ed83b83b0cef2ce288ff09faa86614bb93239 Mon Sep 17 00:00:00 2001 From: Meet Janani Date: Tue, 28 Sep 2021 15:01:06 +0530 Subject: [PATCH] #57 Can we specify a custom card type logos --- CHANGELOG.md | 3 + example/assets/mastercard.png | Bin 0 -> 1036 bytes example/lib/main.dart | 11 +++ lib/credit_card_widget.dart | 127 +++++++++++++++++++------------- lib/custom_card_type_image.dart | 12 +++ lib/flutter_credit_card.dart | 1 + 6 files changed, 103 insertions(+), 51 deletions(-) create mode 100644 example/assets/mastercard.png create mode 100644 lib/custom_card_type_image.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index 39dc450..1ed00f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 3.0.1 - Sep 28, 2021 +- 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/example/assets/mastercard.png b/example/assets/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..f6e58f4e8d971114bcaf195292bbcf9d729151cb GIT binary patch literal 1036 zcmXX^3rt&O6uvD1%cHZ24qN79BV^1+U1TlHsLIH?*QDeja-+#yG10hCNz!NbTjK|9*OCXJ};o>@g#z&2o8HX(c zkW*KL)d{OB>kLY*3NjcB8R`q~>&_}`R2kLUcfa%>Pk|uX859;3MSwsMut-Bg#L8bQ zI~BQG=0y;%rD73BT;g{qyEtUQHb=?`F%qzxCU47wx8)%l=9ch7R(x4nOxk3WRYuxy z;N4P~vf?2dPDtSG5>5hUl!H??e7h>6?0^Ok%=f8q7qmrNysZL|uGXM|>k`Ti$i;!L zB>(~H?-6+_kZAihbM2$j9h|%ghQm8JQ3jJ%+_e^Ma5$I`D(59lS@WpV{`MsjT?hzvvqW0V#?{f|LcRfxw$_c&Odter^`in zR@c`z{J|hek`xu%+zN-E0x4H5kAYi`^9u7t*wjX^R7%fcwLGK`9>PlV^I6Zw?rU>k zKaJ2oh{sUh-o06o$S<^Mb7jxisEhF5H5d+le$|x5WHJ*D-g=z=dWTOZ=dY0ejhlu% z{n-3Jma9sAXLcK-arUnu*}7N+v$UKcZPSS^(V-@XyK@$jm}+vubDM>%7W;5lJbd7M zsngrnHoH7e`__FkJ>)2L9Iw~cXO|qAEI$#b&-?1WGH%gzso`malU*w&FVDZY5wqtD zI3+a?`Yu;Pk9!bQFBqSlP-Juo!ZUwA(Tt;>=MHn(9M1R3Uemq(1J0f|XmQuv;TY-; z#;~4?O?r7INz=10u*Wi;rdTq4%xzOoPG&kAQZthaFagw*nbpL8Z=m9(obH*VS literal 0 HcmV?d00001 diff --git a/example/lib/main.dart b/example/lib/main.dart index db5d043..97f8ab9 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -77,6 +77,17 @@ class MySampleState extends State { useBackgroundImage ? 'assets/card_bg.png' : null, isSwipeGestureEnabled: true, onCreditCardWidgetChange: (CreditCardBrand creditCardBrand) {}, + cardType: CardType.mastercard, + 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';