✨ Light and Dark Theme

- Added support for light and dark theme in example app.
- Added preview for floating card animation with theme change in README.md.
- Switched app icons and web icons from flutter default to Simform's logo.
- Fixed github action workflow status url in README.md.
- Added missing parameters in CreditCardWidget and CardCardForm in README.md.

README.md

@@ -2,21 +2,48 @@
 
 # Flutter Credit Card
 
-![build](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/workflows/Build/badge.svg?branch=master)
+![build](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/workflows/Build/badge.svg?branch=master)
 [![flutter_credit_card](https://img.shields.io/pub/v/flutter_credit_card?label=flutter_credit_card)](https://pub.dev/packages/flutter_credit_card)
 
 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)
+<table>
+    <tr>
+        <td align="center">
+            <figure>
+                <figcaption><b>Glassmorphism and Card Background</b></figcaption>
+                <hr/>
+                <img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/preview.gif" alt="The example app showing credit card widget" width="227"/>
+            </figure>
+        </td>
+    </tr>
+    <tr>
+        <td align="center">
+            <figure>
+                <figcaption><b>Floating Card on Mobile</b></figcaption>
+                <hr/>
+                <img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/credit_card_float_preview.gif" alt="The example app showing card floating animation in mobile" width="227"/>
+            </figure>
+        </td>
+    </tr>
+    <tr>
+        <td align="center">
+            <figure>
+                <figcaption><b>Floating Card on Web</b></figcaption>
+                <hr/>
+                <img src="https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/credit_card_float_cursor_preview.gif" alt="The example app showing card floating animation in web" width="227"/>
+            </figure>
+        </td>
+    </tr>
+</table>
 
 ## 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 +65,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,7 +77,9 @@ 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(),
       enableFloatingCard: true,
       floatConfig: FloatConfig(
@@ -58,10 +88,14 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
         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),
@@ -71,8 +105,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',
@@ -155,25 +191,36 @@ You can do so by following ways:
 ```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',
@@ -196,7 +243,6 @@ You can do so by following ways:
     ),
 ```
 
-
 ## How to use
 Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.
 
@@ -223,6 +269,7 @@ Check out the **example** app in the [example](example) directory or the 'Exampl
 
 ## Awesome Mobile Libraries
 - Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)
+
 ## Note
 We have updated license of flutter_credit_card from BSD 2-Clause "Simplified" to MIT.
 
@@ -250,6 +297,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-
 ```

example/android/build.gradle

@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

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);
 }