Feat: ✨ Floating card animation #144

aditya-css · 2023-09-04T16:53:12Z

Created flutter plugin structure.
Added method and event channel for passing gyroscope sensor data from native side (ios and android).
Added cursor_listener.dart for listening to cursor movement on desktop and website.
Added floating_event.dart to represent the movement data.
Added floating_controller.dart to house x and y axis points and have transformation logic to move the widget as per movement data.
Updated readme.md to reflect latest addition of floating animation feature.

vatsaltanna · 2023-09-08T11:10:02Z

README.md

@@ -9,7 +9,9 @@ A Flutter package allows you to easily implement the Credit card's UI easily wit

 ## Preview

-![The example app running in Android](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/preview.gif)
+<img src="readme_assets/preview.gif" alt="The example app showing credit card widget" width="240" height="451"/>
+<img src="readme_assets/credit_card_float_preview.gif" alt="The example app showing card floating animation in mobile" width="207" height="448"/>


as discussed update gif

vatsaltanna · 2023-09-08T11:11:33Z

README.md

@@ -109,6 +111,20 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
    ),
 ```    

+*Floating Card*
+
+Make sure to call `CreditCardWidget.instance.initialize()` before using `CreditCardWidget` with 


Let's try to handle this intialization internally. CreditCardWidget.instance.initialize()

vatsaltanna · 2023-09-08T11:13:18Z

android/build.gradle

@@ -0,0 +1,64 @@
+group 'com.simform.flutter_credit_card'
+version '3.0.7'


is this the package version? if yes can we make this dynamic?

vatsaltanna · 2023-09-08T11:15:05Z

android/src/main/kotlin/com/simform/flutter_credit_card/GyroscopeStreamHandler.kt

+import io.flutter.plugin.common.EventChannel
+import io.flutter.plugin.common.EventChannel.EventSink
+
+private const val FPS_60 = 16666


please remove this and use static value directly

vatsaltanna · 2023-09-08T11:15:16Z

android/src/main/kotlin/com/simform/flutter_credit_card/GyroscopeStreamHandler.kt

+
+    override fun onListen(arguments: Any?, events: EventSink) {
+        sensorEventListener = createSensorEventListener(events)
+        sensorManager.registerListener(sensorEventListener, sensor, FPS_60)


use value directly here.

vatsaltanna · 2023-09-08T11:16:44Z

example/android/app/src/main/kotlin/com/simform/flutter_credit_card_example/MainActivity.kt

@@ -0,0 +1,6 @@
+package com.simform.flutter_credit_card_example


is this file necessary to add can we delete this file if not required?

vatsaltanna · 2023-09-10T11:39:32Z

example/lib/main.dart

 import 'package:flutter_credit_card/credit_card_brand.dart';
 import 'package:flutter_credit_card/flutter_credit_card.dart';

-void main() => runApp(MySample());
+Future<void> main() async {
+  WidgetsFlutterBinding.ensureInitialized();


any reason to add this code ?

vatsaltanna · 2023-09-10T11:42:54Z

example/lib/main.dart

-                            labelText: 'Expired Date',
-                            hintText: 'XX/XX',
+                    CreditCardWidget(
+                      shouldFloat: useFloatingAnimation,


instead of should use enable word. shouldFloat > enableFloatingCard

vatsaltanna · 2023-09-10T11:44:29Z

example/lib/main.dart

-                            hintText: 'XX/XX',
+                    CreditCardWidget(
+                      shouldFloat: useFloatingAnimation,
+                      shouldAddGlare: true,


this parameters are dependant on floating card so instead o separate parameter we can create a class like FloatingCardConfig

vatsaltanna · 2023-09-10T11:45:40Z

example/web/favicon.png

I suggest to use simform favicon here.

vatsaltanna · 2023-09-10T11:48:08Z

lib/credit_card_background.dart

+        final double screenWidth = constraints.maxWidth.isInfinite
+            ? MediaQuery.of(context).size.width
+            : constraints.maxWidth;
+        final double screenHeight = MediaQuery.of(context).size.height;


take variable for MediaQuery.of(context).size

Done in next PR where inheritedModel is utilised (i.e. MediaQuery.sizeOf()) as Dart 3 support is enabled in it.

vatsaltanna · 2023-09-10T11:49:20Z

lib/credit_card_background.dart

+                              .withOpacity(AppConstants.minShadowOpacity),
+                          offset: Offset(
+                            floatingController!.y * 100,
+                            -floatingController!.x * 100 + 8,


any specific reason to add 8 here? @kavantrivedi @aditya-chavda

Just to have the shadow a below the card widget by 8 pixel. Want me to add comment there expressing the same?

vatsaltanna · 2023-09-10T13:32:53Z

lib/credit_card_widget.dart

    _gradientSetup();
    _updateRotations(false);
  }

+  @override
+  void didChangeDependencies() {
+    orientation = MediaQuery.of(context).orientation;


can we write this code like this ?
orientation ??= MediaQuery.of(context).orientation;

I believe it would be better to always use the updated values of the MediaQuery object.

vatsaltanna · 2023-09-10T13:37:09Z

lib/credit_card_widget.dart

+                    ? AppConstants.creditCardPadding
+                    : widget.padding;
+
+                return CursorListener(


I belive this is only used as listner so can we avoid this widget from build and use some other workaround?

That is correct, but it listens over a particular region, which would be the credit card widget, and thus it is in the build method.

ujas-m-simformsolutions · 2023-09-12T09:49:06Z

android/src/main/kotlin/com/simform/flutter_credit_card/GyroscopeStreamHandler.kt

+
+    override fun onListen(arguments: Any?, events: EventSink) {
+        sensorEventListener = createSensorEventListener(events)
+        sensorManager.registerListener(sensorEventListener, sensor, 16666)


Please use constant instead of directly as a value. Also document that what this constant does.

Conflicts with @vatsaltanna 's request to revert using const variable for that value.

ujas-m-simformsolutions · 2023-09-12T09:49:28Z

ios/Classes/FlutterCreditCardPlugin.swift

+
+    init(motionManager: CMMotionManager) {
+        self.motionManager = motionManager
+        self.motionManager!.gyroUpdateInterval = 0.016666


Please use constant instead of directly as a value. Also document that what this constant does.

Also have you taken into account higher refresh rate devices?

@vatsaltanna please advice on accounting device's refresh rate instead of fixed 60 fps.

lib/credit_card_background.dart

ujas-m-simformsolutions · 2023-09-12T09:54:49Z

lib/credit_card_background.dart

+                          color: shadowConfig!.color,
+                          offset: shadowConfig!.offset +
+                              Offset(
+                                floatingController!.y * 100,


Use contant.

lib/credit_card_background.dart

ujas-m-simformsolutions · 2023-09-12T10:08:15Z

lib/credit_card_widget.dart

+
+  bool isAnimating = false;
+
+  double get glarePosition =>


Please add some documentation above this getter so that anyone can understand what this logic does.

ujas-m-simformsolutions · 2023-09-12T10:11:05Z

lib/credit_card_widget.dart

    ///initialize the animation controller
    controller = AnimationController(
      duration: widget.animationDuration,
      vsync: this,
    );

+    controller.addStatusListener((AnimationStatus status) {
+      if (status == AnimationStatus.forward) {


This condition can be simplified like this

isAnimating = status == AnimationStatus.forward || status == AnimationStatus.reverse;

lib/floating_animation/cursor_listener.dart

ujas-m-simformsolutions · 2023-09-12T10:20:03Z

README.md

@@ -109,6 +120,36 @@ import 'package:flutter_credit_card/flutter_credit_card.dart';
    ),
 ```    

+*Floating Card*


I think a row of check boxes with indicating supported platform should also be added

I believe that would be counter intuitive as we are currently not supporting only mobile web.

vatsaltanna · 2023-09-13T17:35:13Z

example/lib/main.dart

+                color: bgColor,
+                image: DecorationImage(
+                  image: ExactAssetImage(
+                    isLightTheme ? 'assets/bg-white.png' : 'assets/bg.png',


convert assets/bg.png > assets/bg-dark.png and assets/bg-white.png > assets/bg-light.png

vatsaltanna · 2023-09-13T17:38:24Z

example/lib/main.dart

-                            enabledBorder: border,
-                            labelText: 'Card Holder',
+                    CreditCardWidget(
+                      floatConfig: !useFloatingAnimation


instead o negation sign switch the condition and code

I would suggest to use a flag to enable floating animation. like enableFloatingCard and use floatConfig as configuration only if it is null then use default values

lib/credit_card_background.dart

vatsaltanna · 2023-09-13T17:46:19Z

example/lib/main.dart

+                          ? null
+                          : FloatConfig(
+                              isGlareEnabled: true,
+                              shadowConfig: FloatShadowConfig.preset(),


consider null as default value instead of FloatShadowConfig.preset()

That will by default disable the shadow effect. Can you kindly confirm if that is okay?

so the idea over here is to have a flag to enable or disable shadow which is by default enabled and the purpose of config will only be to change the paramteres of shadow.

…nd mouse pointer animation on web desktop

JanakMistry2000 · 2023-09-18T12:58:51Z

lib/flutter_credit_card_method_channel.dart

+import 'floating_animation/floating_event.dart';
+import 'flutter_credit_card_platform_interface.dart';
+
+const String _methodChannelName = 'com.simform.flutter_credit_card';


Lets added channel names and method name to constant file.

lib/flutter_credit_card_method_channel.dart

JanakMistry2000 · 2023-09-18T15:55:14Z

lib/floating_animation/glare_effect_widget.dart

+    AppConstants.defaultGlareColor.withOpacity(0.1),
+    AppConstants.defaultGlareColor.withOpacity(0.07),
+    AppConstants.defaultGlareColor.withOpacity(0.05),
+  ];


Instead of static member can we create a getter for this?

Creating getter would cause creation of the object in question again and again on every usage of it. I believe using this way would save that case.

lib/credit_card_background.dart

android/src/main/kotlin/com/simform/flutter_credit_card/FlutterCreditCardPlugin.kt

Ujas-Majithiya · 2023-09-19T15:54:07Z

android/build.gradle

+
+    dependencies {
+        testImplementation 'org.jetbrains.kotlin:kotlin-test'
+        testImplementation 'org.mockito:mockito-core:5.0.0'


I guess we can remove these dependencies

ujas-m-simformsolutions

vatsaltanna · 2023-09-22T09:27:44Z

CHANGELOG.md

@@ -1,6 +1,8 @@
 # [3.0.8](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.8) (Unreleased)


please use major version here

vatsaltanna · 2023-09-22T09:37:15Z

pubspec.yaml

@@ -1,22 +1,36 @@
 name: flutter_credit_card
-description: A Credit Card widget package, support entering card details, card flip animation.
+description: A Credit Card widget package with support of entering card details, and animations like card flip
+  and float.
 version: 3.0.8


- Added support for light and dark theme in example app. - Added preview for floating card animation with theme change in README.md. - Fixed github action workflow status url in README.md. - Added missing parameters in CreditCardWidget and CardCardForm in README.md.

aditya-css requested a review from vatsaltanna September 4, 2023 16:53

aditya-css changed the title ~~✨ Floating card animation~~ Feat: ✨ Floating card animation Sep 4, 2023

aditya-css force-pushed the feature/floating_animation_web_interface branch 5 times, most recently from 908ad8a to d9e58d1 Compare September 6, 2023 13:10

vatsaltanna reviewed Sep 8, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch from d9e58d1 to e64a327 Compare September 9, 2023 13:52

kavantrivedi force-pushed the feature/floating_animation_web_interface branch from e64a327 to 2146540 Compare September 10, 2023 07:09

vatsaltanna reviewed Sep 10, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch 2 times, most recently from edb21a4 to 2c12a36 Compare September 11, 2023 17:00

ujas-m-simformsolutions requested changes Sep 12, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch 3 times, most recently from 5d19797 to ee2e2d5 Compare September 13, 2023 14:18

vatsaltanna reviewed Sep 13, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch 3 times, most recently from fd3042a to 9b421db Compare September 18, 2023 11:02

kavantrivedi added 3 commits September 18, 2023 17:04

✨ Added floating animation based on gyroscope's data in android

44104c7

✨ Added floating animation based on gyroscope's data in IOS

e8090ba

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

22c5403

…nd mouse pointer animation on web desktop

aditya-css force-pushed the feature/floating_animation_web_interface branch from 9b421db to 751e11d Compare September 18, 2023 11:37

JanakMistry2000 reviewed Sep 18, 2023

View reviewed changes

lib/flutter_credit_card_method_channel.dart Show resolved Hide resolved

JanakMistry2000 reviewed Sep 18, 2023

View reviewed changes

lib/credit_card_background.dart Show resolved Hide resolved

JanakMistry2000 reviewed Sep 18, 2023

View reviewed changes

android/src/main/kotlin/com/simform/flutter_credit_card/FlutterCreditCardPlugin.kt Show resolved Hide resolved

JanakMistry2000 reviewed Sep 18, 2023

View reviewed changes

android/src/main/kotlin/com/simform/flutter_credit_card/FlutterCreditCardPlugin.kt Show resolved Hide resolved

aditya-css force-pushed the feature/floating_animation_web_interface branch 2 times, most recently from 4912cef to 1a42482 Compare September 19, 2023 12:39

JanakMistry2000 approved these changes Sep 19, 2023

View reviewed changes

Ujas-Majithiya reviewed Sep 19, 2023

View reviewed changes

🔨 Code Improvement

4c38caa

aditya-css force-pushed the feature/floating_animation_web_interface branch 2 times, most recently from ce48ed9 to 4d7bc9e Compare September 20, 2023 11:08

ujas-m-simformsolutions approved these changes Sep 20, 2023

View reviewed changes

Ujas-Majithiya approved these changes Sep 20, 2023

View reviewed changes

vatsaltanna reviewed Sep 22, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch from 4d7bc9e to 5d1935a Compare September 22, 2023 09:35

vatsaltanna reviewed Sep 22, 2023

View reviewed changes

aditya-css force-pushed the feature/floating_animation_web_interface branch from 5d1935a to 38a3a70 Compare September 22, 2023 09:39

vatsaltanna approved these changes Sep 22, 2023

View reviewed changes

vatsaltanna merged commit 8df0fd6 into master Sep 22, 2023
1 check passed

		@@ -0,0 +1,64 @@
		group 'com.simform.flutter_credit_card'
		version '3.0.7'

		@@ -0,0 +1,6 @@
		package com.simform.flutter_credit_card_example

		@@ -1,6 +1,8 @@
		# [3.0.8](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.8) (Unreleased)

Feat: ✨ Floating card animation #144

Feat: ✨ Floating card animation #144

Conversation

aditya-css commented Sep 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vatsaltanna Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ujas-m-simformsolutions left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vatsaltanna Sep 8, 2023 •

edited

Loading