✨ Added floating animation based on gyroscope's data in Android Web a…

…nd mouse pointer animation on web desktop
SimformSolutionsPvtLtd · Sep 10, 2023 · 2146540 · 2146540
1 parent 144ab20
commit 2146540
Show file tree

Hide file tree

Showing 17 changed files with 742 additions and 447 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -66,6 +66,8 @@ class MySampleState extends State<MySample> {
                 ),
                 CreditCardWidget(
                   isFloatingAnimationEnabled: true,
+                  isGlareAnimationEnabled: true,
+                  isShadowAnimationEnabled: true,
                   glassmorphismConfig:
                       useGlassMorphism ? Glassmorphism.defaultConfig() : null,
                   cardNumber: cardNumber,

diff --git a/example/web/favicon.png b/example/web/favicon.png
diff --git a/example/web/icons/Icon-192.png b/example/web/icons/Icon-192.png
diff --git a/example/web/icons/Icon-512.png b/example/web/icons/Icon-512.png
diff --git a/example/web/icons/Icon-maskable-192.png b/example/web/icons/Icon-maskable-192.png
diff --git a/example/web/icons/Icon-maskable-512.png b/example/web/icons/Icon-maskable-512.png
diff --git a/example/web/index.html b/example/web/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="Demonstrates how to use the flutter_credit_card plugin.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="flutter_credit_card_example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>flutter_credit_card_example</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    var serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+        var serviceWorkerVersion = null;
+        var scriptLoaded = false;
+
+        function loadMainDartJs() {
+            if (scriptLoaded) {
+                return;
+            }
+            scriptLoaded = true;
+            var scriptTag = document.createElement('script');
+            scriptTag.src = 'main.dart.js';
+            scriptTag.type = 'application/javascript';
+            document.body.append(scriptTag);
+        }
+
+        if ('serviceWorker' in navigator) {
+            // Service workers are supported. Use them.
+            window.addEventListener('load', function() {
+                // Wait for registration to finish before dropping the <script> tag.
+                // Otherwise, the browser will load the script multiple times,
+                // potentially different versions.
+                var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
+                navigator.serviceWorker.register(serviceWorkerUrl)
+                    .then((reg) => {
+                        function waitForActivation(serviceWorker) {
+                            serviceWorker.addEventListener('statechange', () => {
+                                if (serviceWorker.state == 'activated') {
+                                    console.log('Installed new service worker.');
+                                    loadMainDartJs();
+                                }
+                            });
+                        }
+                        if (!reg.active && (reg.installing || reg.waiting)) {
+                            // No active web worker and we have installed or are installing
+                            // one for the first time. Simply wait for it to activate.
+                            waitForActivation(reg.installing || reg.waiting);
+                        } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+                            // When the app updates the serviceWorkerVersion changes, so we
+                            // need to ask the service worker to update.
+                            console.log('New service worker available.');
+                            reg.update();
+                            waitForActivation(reg.installing);
+                        } else {
+                            // Existing service worker is still good.
+                            console.log('Loading app from service worker.');
+                            loadMainDartJs();
+                        }
+                    });
+
+                // If service worker doesn't succeed in a reasonable amount of time,
+                // fallback to plaint <script> tag.
+                setTimeout(() => {
+                    if (!scriptLoaded) {
+                        console.warn(
+                            'Failed to load app from service worker. Falling back to plain <script> tag.',
+                        );
+                        loadMainDartJs();
+                    }
+                }, 4000);
+            });
+        } else {
+            // Service workers not supported. Just drop the <script> tag.
+            loadMainDartJs();
+        }
+    </script>
+</body>
+</html>
diff --git a/example/web/manifest.json b/example/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "flutter_credit_card_example",
+    "short_name": "flutter_credit_card_example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "Demonstrates how to use the flutter_credit_card plugin.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/lib/constants.dart b/lib/constants.dart
@@ -6,31 +6,17 @@ class AppConstants {
   static const double creditCardAspectRatio = 0.5714;
   static const double creditCardPadding = 16;
 
+  static const double maxfloatingBack = 0.05;
+  static const double minfloatingBack = 0.01;
+  static const double defaultDampingFactor = 0.2;
 
   /// Color constants
   static const Color defaultGlareColor = Color(0xffFFFFFF),
       defaultShadowColor = Color(0xff000000);
 
-  /// Default filter quality
-  static const FilterQuality defaultFilterQuality = FilterQuality.high;
+     static const double defaultMaxAngle = pi / 10,
 
-  /// Numeric constants
-    double maxElevation = 100,
-
-  /// Defaults
-      defaultMaxAngle = pi / 10,
-
-  /// Shadow-specific values
-      minShadowOffset = 0,
-      maxShadowOffset = 40,
-      minShadowTopOffset = 5,
-      maxShadowTopOffset = 45,
       minBlurRadius = 10,
-      maxBlurRadius = 30,
-      minShadowOpacity = 0.3,
-      maxShadowOpacity = 0.2,
-
-  /// Translation-specific values
-      maxDistance = 75.0;
+      minShadowOpacity = 0.3;
 
 }
diff --git a/lib/credit_card_background.dart b/lib/credit_card_background.dart
@@ -5,7 +5,6 @@ import 'package:flutter_credit_card/floating_card_setup/floating_controller.dart
 import 'package:flutter_credit_card/floating_card_setup/glare_effect_widget.dart';
 
 import 'constants.dart';
-import 'floating_card_setup/constants.dart';
 import 'glassmorphism_config.dart';
 
 class CardBackground extends StatelessWidget {
@@ -22,6 +21,7 @@ class CardBackground extends StatelessWidget {
     this.border,
     this.floatingController,
     this.glarePosition,
+    this.shadowEnabled = false,
   })  : assert(
             (backgroundImage == null && backgroundNetworkImage == null) ||
                 (backgroundImage == null && backgroundNetworkImage != null) ||
@@ -40,6 +40,7 @@ class CardBackground extends StatelessWidget {
   final BoxBorder? border;
   final FloatingController? floatingController;
   final double? glarePosition;
+  final bool shadowEnabled;
 
   @override
   Widget build(BuildContext context) {
@@ -53,24 +54,25 @@ class CardBackground extends StatelessWidget {
         return Stack(
           alignment: Alignment.center,
           children: <Widget>[
-            if(floatingController != null)
-            Positioned(
-              left: floatingController!.y * 100 + 16,
-              right: -floatingController!.y * 100 + 16,
-              top: -floatingController!.x * 100 + 16,
-              bottom: floatingController!.x * 100 + 16,
-              child: Container(
-                decoration: BoxDecoration(
-                  borderRadius: const BorderRadius.all(Radius.circular(8)),
-                  boxShadow: <BoxShadow>[
-                    BoxShadow(
-                      blurRadius: minBlurRadius,
-                      color: defaultShadowColor.withOpacity(minShadowOpacity),
-                    ),
-                  ],
+            if (floatingController != null && shadowEnabled)
+              Positioned(
+                left: floatingController!.y * 100 + 16,
+                right: -floatingController!.y * 100 + 16,
+                top: -floatingController!.x * 100 + 16,
+                bottom: floatingController!.x * 100 + 16,
+                child: Container(
+                  decoration: BoxDecoration(
+                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                    boxShadow: <BoxShadow>[
+                      BoxShadow(
+                        blurRadius: AppConstants.minBlurRadius,
+                        color: AppConstants.defaultShadowColor
+                            .withOpacity(AppConstants.minShadowOpacity),
+                      ),
+                    ],
+                  ),
                 ),
               ),
-            ),
             Container(
               margin: EdgeInsets.all(padding),
               decoration: BoxDecoration(