🐛 SimformSolutionsPvtLtd#57 Can specify a custom card type icons

meetjanani · Oct 8, 2021 · 0f69a92 · 0f69a92
1 parent 3abd528
commit 0f69a92
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 51 deletions.
diff --git 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
@@ -59,6 +59,16 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
         isChipVisible: true,
         isSwipeGestureEnabled: true,
         animationDuration: Duration(milliseconds: 1000),
+        customCardIcons: <CustomCardTypeImage>[
+                    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
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -77,6 +77,16 @@ class MySampleState extends State<MySample> {
                       useBackgroundImage ? 'assets/card_bg.png' : null,
                   isSwipeGestureEnabled: true,
                   onCreditCardWidgetChange: (CreditCardBrand creditCardBrand) {},
+                  customCardIcons: <CustomCardTypeImage>[
+                    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
@@ -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<CardType, String> CardTypeIconAsset = <CardType, String>{
@@ -37,6 +38,7 @@ class CreditCardWidget extends StatefulWidget {
       this.glassmorphismConfig,
       this.isChipVisible = true,
       this.isSwipeGestureEnabled = true,
+      this.customCardIcons = const <CustomCardTypeImage>[],
       required this.onCreditCardWidgetChange})
       : super(key: key);
 
@@ -63,6 +65,7 @@ class CreditCardWidget extends StatefulWidget {
   final String labelExpiredDate;
 
   final CardType? cardType;
+  final List<CustomCardTypeImage> customCardIcons;
 
   @override
   _CreditCardWidgetState createState() => _CreditCardWidgetState();
@@ -523,69 +526,91 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
     return cardType;
   }
 
-  Widget getCardTypeImage(CardType? cardType) => Image.asset(
+  Widget getCardTypeImage(CardType? cardType) {
+    final List<CustomCardTypeImage> 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<CustomCardTypeImage> 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<CustomCardTypeImage> getCustomCardTypeIcon(CardType currentCardType) {
+    final List<CustomCardTypeImage> 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
@@ -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
@@ -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';