✨ Light and Dark Theme

- Added support for light and dark theme in example app.
- Added preview for floating card animation with theme change.
- Switched app icons and web icons from flutter default to Simform's logo.

README.md

@@ -1,4 +1,4 @@
-![alt text](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/banner.png?raw=true)
+![alt text](readme_assets/banner.png?raw=true)
 
 # Flutter Credit Card
 
@@ -8,15 +8,51 @@
 A Flutter package allows you to easily implement the Credit card's UI easily with the Card detection.
 
 ## Preview
-
-![The example app running in Android](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/preview.gif)
+<style>
+        /* CSS for the preview images table */
+        .preview_table {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        /* CSS for each preview image and title */
+        .preview_cell {
+            text-align: center;
+            flex-basis: 33.33%; /* 33.33% width */
+            padding: 10px; /* a little spacing around images */
+            border: 1px solid #ccc; /* Add border for a table-like effect */
+        }
+
+        /* CSS for the preview image */
+        .preview_cell img {
+            max-width: 100%;
+            min-width: 240px; /* Minimum width for each image */
+            height: auto;
+        }
+</style>
+<div class="preview_table">
+    <div class="preview_cell">
+        Glassmorphism and Card Background
+        <hr/>
+        <img src="readme_assets/preview.gif" alt="The example app showing credit card widget"/>
+    </div>
+    <div class="preview_cell">
+        Floating Card on Mobile
+        <hr/>
+        <img src="readme_assets/credit_card_float_preview.gif" alt="The example app showing card floating animation in mobile"/>
+    </div>
+    <div class="preview_cell">
+        Floating Card on Web
+        <hr/>
+        <img src="readme_assets/credit_card_float_cursor_preview.gif" alt="The example app showing card floating animation in web"/>
+    </div>
+</div>
 
 ## Installing
 
 1.  Add dependency to `pubspec.yaml`
 
-    Get the latest version in the 'Installing' tab
-    on [pub.dev](https://pub.dev/packages/flutter_credit_card/install)
+    Get the latest version from the 'Installing' tab on [pub.dev](https://pub.dev/packages/flutter_credit_card/install)
 
 ```dart
 dependencies:
@@ -38,6 +74,7 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
       cardHolderName: cardHolderName,
       cvvCode: cvvCode,
       showBackView: isCvvFocused, //true when you want to show cvv(back) view
+      onCreditCardWidgetChange: (CreditCardBrand brand) {}, // Callback for anytime credit card brand is changed
     ),
 ```    
 
@@ -49,13 +86,23 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
       cardHolderName: cardHolderName,
       cvvCode: cvvCode,
       showBackView: isCvvFocused,
-      cardbgColor: Colors.black,
+      onCreditCardWidgetChange: (CreditCardBrand brand) {},
+      bankName: 'Name of the Bank',
+      cardBgColor: Colors.black87,
       glassmorphismConfig: Glassmorphism.defaultConfig(),
+      floatConfig: FloatConfig(
+        isGlareEnabled: true,
+        shadowConfig: FloatShadowConfig.preset(),
+      ),
       backgroundImage: 'assets/card_bg.png',
+      backgroundNetworkImage: 'https://www.xyz.com/card_bg.png',
       labelValidThru: 'VALID\nTHRU',
       obscureCardNumber: true,
       obscureInitialCardNumber: false,
       obscureCardCvv: true,
+      labelCardHolder: 'CARD HOLDER',
+      labelValidThru: 'VALID\nTHRU',
+      cardType: CardType.mastercard,
       isHolderNameVisible: false,
       height: 175,
       textStyle: TextStyle(color: Colors.yellowAccent),
@@ -65,8 +112,10 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
       animationDuration: Duration(milliseconds: 1000),
       frontCardBorder: Border.all(color: Colors.grey),
       backCardBorder: Border.all(color: Colors.grey),
-      customCardIcons: <CustomCardTypeImage>[
-        CustomCardTypeImage(
+      chipColor: Colors.red,
+      padding: 16,
+      customCardTypeIcons: <CustomCardTypeIcons>[
+        CustomCardTypeIcons(
           cardType: CardType.mastercard,
           cardImage: Image.asset(
             'assets/mastercard.png',
@@ -110,40 +159,73 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
 ```    
 
 *Floating Card*
+> NOTE: Currently the floating card animation is not supported on mobile platform browsers.
+
+To enable floating card animation, pass `FloatConfig` to `floatConfig` parameter of 
+`CreditCardWidget`. Passing `null` would disable the floating card animation (default).
+You can do so by following ways:
+
+> Passing no value to `shadowConfig` would disable the shadow beneath the credit card widget.
+
++ Default Shadow Configuration
+```dart
+    CreditCardWidget(
+        floatConfig: FloatConfig(
+            isGlareEnabled: true,
+            shadowConfig: FloatShadowConfig.preset(),
+        ),
+    );
+```    
 
++ Custom Shadow Configuration
 ```dart
     CreditCardWidget(
-      shouldFloat: true,
-      shouldAddShadow: true,
-      shouldAddGlare: true,
+        floatConfig: FloatConfig(
+            isGlareEnabled: true,
+            shadowConfig: FloatShadowConfig(
+              offset: Offset(10, 10),
+              color: Colors.black84,
+              blurRadius: 15,
+            ),
+        ),
     );
 ```    
-> NOTE: Currently the floating card animation is not supported on mobile platform browsers.
 
 4.  Adding CreditCardForm
 
 ```dart
     CreditCardForm(
       formKey: formKey, // Required 
+      cardNumber: cardNumber, // Required
+      expiryDate: expiryDate, // Required
+      cardHolderName: cardHolderName, // Required
+      cvvCode: cvvCode, // Required
       cardNumberKey: cardNumberKey,
       cvvCodeKey: cvvCodeKey,
       expiryDateKey: expiryDateKey,
       cardHolderKey: cardHolderKey,
       onCreditCardModelChange: (CreditCardModel data) {}, // Required
-      themeColor: Colors.red,
+      themeColor: Colors.black, // Required
+      textColor: Colors.white,
+      cursorColor: Colors.blue,
       obscureCvv: true, 
       obscureNumber: true,
       isHolderNameVisible: true,
       isCardNumberVisible: true,
       isExpiryDateVisible: true,
       enableCvv: true,
+      cvvValidationMessage: 'Please input a valid CVV',
+      dateValidationMessage: 'Please input a valid date',
+      numberValidationMessage: 'Please input a valid number',
       cardNumberValidator: (String? cardNumber){},
       expiryDateValidator: (String? expiryDate){},
       cvvValidator: (String? cvv){},
       cardHolderValidator: (String? cardHolderName){},
       onFormComplete: () {
       // callback to execute at the end of filling card data
       },
+      autovalidateMode: AutovalidateMode.always,
+      disableCardNumberAutoFillHints: false,
       cardNumberDecoration: const InputDecoration(
         border: OutlineInputBorder(),
         labelText: 'Number',
@@ -172,7 +254,8 @@ Check out the **example** app in the [example](example) directory or the 'Exampl
 
 ## Credit
 
-This package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art.
+- This package's flip animation is inspired from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art.
+- This package's float animation is inspired from the [Motion](https://pub.dev/packages/motion) flutter package.
 
 ## Main Contributors
 

example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,122 +1 @@
-{
-  "images": [
-    {
-      "size": "20x20",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "60x60",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "60x60",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "76x76",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "76x76",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "83.5x83.5",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "1024x1024",
-      "idiom": "ios-marketing",
-      "filename": "[email protected]",
-      "scale": "1x"
-    }
-  ],
-  "info": {
-    "version": 1,
-    "author": "xcode"
-  }
-}
+{"images":[{"size":"60x60","expected-size":"180","filename":"180.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"40x40","expected-size":"80","filename":"80.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"40x40","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"60x60","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"57x57","expected-size":"57","filename":"57.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"58","filename":"58.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"29x29","expected-size":"29","filename":"29.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"87","filename":"87.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"57x57","expected-size":"114","filename":"114.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"40","filename":"40.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"60","filename":"60.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"1024x1024","filename":"1024.png","expected-size":"1024","idiom":"ios-marketing","folder":"Assets.xcassets/AppIcon.appiconset/","scale":"1x"}]}

example/lib/app_colors.dart

@@ -4,8 +4,9 @@ class AppColors {
   AppColors._();
 
   static const Color cardBgColor = Color(0xff363636);
+  static const Color cardBgLightColor = Color(0xff999999);
   static const Color colorB58D67 = Color(0xffB58D67);
   static const Color colorE5D1B2 = Color(0xffE5D1B2);
   static const Color colorF9EED2 = Color(0xffF9EED2);
-  static const Color colorFFFFFD = Color(0xffFFFFFD);
+  static const Color colorEFEFED = Color(0xffEFEFED);
 }