Merge pull request #50 from OmriLevy888/#45-card-buttons-swipe-indica…

…tion #45 card buttons swipe indication
OmriLevy888 · May 14, 2022 · be0d4d8 · be0d4d8
2 parents 268e630 + a759ead
commit be0d4d8
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 11 deletions.
diff --git a/lib/home_page/song_cards/song_cards.dart b/lib/home_page/song_cards/song_cards.dart
@@ -15,6 +15,7 @@ class _SongSwipeCardsState extends State<SongSwipeCards> {
   late SongCardFactoryResult _head;
   late SongCardFactoryResult _back;
   late bool _enabled;
+  DragState _dragState = DragState();
 
   @override
   void initState() {
@@ -85,9 +86,19 @@ class _SongSwipeCardsState extends State<SongSwipeCards> {
         child: _head.card,
         feedback: _head.card,
         childWhenDragging: _back.card,
+        onDragStarted: () => setState(() {
+          _dragState = DragState();
+        }),
         onDragEnd: _onDragEnd,
+        onDragUpdate: (DragUpdateDetails drag) => setState(() {
+          _dragState.onDragUpdate(drag);
+        }),
+        onDraggableCanceled: (Velocity velocity, Offset offset) => setState(() {
+          _dragState = DragState();
+        }),
       ),
       SwipeButtons(
+        dragState: _dragState,
         swipeRightButtonAction: _enabled
             ? () {
                 _onSwipeRight();

diff --git a/lib/home_page/song_cards/swipe_buttons.dart b/lib/home_page/song_cards/swipe_buttons.dart
@@ -1,20 +1,40 @@
 import 'package:flutter/material.dart';
 import 'package:song_tinder/widgets/widgets.dart';
 
+import 'dart:math' as math;
+
 class SwipeButtons extends StatelessWidget {
   const SwipeButtons({
     Key? key,
+    required this.dragState,
     required this.swipeLeftButtonAction,
     required this.swipeRightButtonAction,
     required this.swipeUpButtonAction,
     required this.enabled,
   }) : super(key: key);
 
+  final DragState dragState;
   final void Function()? swipeLeftButtonAction;
   final void Function()? swipeRightButtonAction;
   final void Function()? swipeUpButtonAction;
   final bool enabled;
 
+  Color _getButtonBackgroundColor(BuildContext context, Color baseColor,
+      Color accentColor, double mixFactor) {
+    if (!enabled) {
+      return Theme.of(context).disabledColor;
+    }
+
+    int mixChannel(int base, int accent) =>
+        (base + mixFactor * (accent - base)).toInt();
+
+    return Color.fromARGB(
+        mixChannel(baseColor.alpha, accentColor.alpha),
+        mixChannel(baseColor.red, accentColor.red),
+        mixChannel(baseColor.green, accentColor.green),
+        mixChannel(baseColor.blue, accentColor.blue));
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -27,26 +47,35 @@ class SwipeButtons extends StatelessWidget {
         children: [
           CircleButton(
             radius: MediaQuery.of(context).size.width / 10,
-            color: enabled
-                ? const Color.fromARGB(255, 221, 0, 0)
-                : Theme.of(context).disabledColor,
+            backgroundColor: _getButtonBackgroundColor(
+                context,
+                Theme.of(context).colorScheme.primary,
+                Theme.of(context).colorScheme.onPrimary,
+                dragState.left()),
+            color: const Color.fromARGB(255, 221, 0, 0),
             icon: Icons.close,
             onPressed: swipeLeftButtonAction,
           ),
           CircleButton(
             radius: MediaQuery.of(context).size.width / 12.5,
-            color: enabled
-                ? const Color.fromARGB(255, 0, 181, 226)
-                : Theme.of(context).disabledColor,
+            backgroundColor: _getButtonBackgroundColor(
+                context,
+                Theme.of(context).colorScheme.primary,
+                Theme.of(context).colorScheme.onPrimary,
+                dragState.up()),
+            color: const Color.fromARGB(255, 0, 181, 226),
             icon: Icons.menu,
             onPressed: swipeUpButtonAction,
             onLongPress: () => debugPrint('Configure swipe up'),
           ),
           CircleButton(
             radius: MediaQuery.of(context).size.width / 10,
-            color: enabled
-                ? const Color.fromARGB(255, 1, 202, 62)
-                : Theme.of(context).disabledColor,
+            backgroundColor: _getButtonBackgroundColor(
+                context,
+                Theme.of(context).colorScheme.primary,
+                Theme.of(context).colorScheme.onPrimary,
+                dragState.right()),
+            color: const Color.fromARGB(255, 1, 202, 62),
             icon: Icons.favorite,
             onPressed: swipeRightButtonAction,
             onLongPress: () => debugPrint('Configure swipe right'),
@@ -56,3 +85,38 @@ class SwipeButtons extends StatelessWidget {
     );
   }
 }
+
+class DragState {
+  double _horizontal = 0.0;
+  double _vertical = 0.0;
+
+  DragState();
+
+  void onDragUpdate(DragUpdateDetails drag) {
+    _horizontal += drag.delta.dx;
+    _vertical += drag.delta.dy;
+  }
+
+  double _retWrapper(double value) {
+    return value.isNaN
+        ? 0.0
+        : value.isInfinite
+            ? 0.0
+            : math.max(math.min(value - 0.25, 1.0), 0.0);
+  }
+
+  double left() {
+    return _retWrapper(
+        (_horizontal < 0) ? math.log(_horizontal.abs()) / math.log(300) : 0.0);
+  }
+
+  double up() {
+    return _retWrapper(
+        (_vertical < 0) ? math.log(_horizontal.abs()) / math.log(30) : 0.0);
+  }
+
+  double right() {
+    return _retWrapper(
+        (_horizontal > 0) ? math.log(_horizontal.abs()) / math.log(300) : 0.0);
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -75,7 +75,7 @@ class _SongTinderAppState extends State<SongTinderApp> {
           colorScheme: const ColorScheme(
               brightness: Brightness.dark,
               primary: Color.fromARGB(255, 36, 36, 36),
-              onPrimary: Color.fromARGB(255, 255, 255, 255),
+              onPrimary: Color.fromARGB(255, 179, 179, 179),
               secondary: Color.fromARGB(255, 255, 255, 255),
               onSecondary: Color.fromARGB(255, 241, 9, 9),
               error: Colors.red,

diff --git a/lib/widgets/circle_button.dart b/lib/widgets/circle_button.dart
@@ -6,6 +6,7 @@ class CircleButton extends StatelessWidget {
       required this.onPressed,
       this.onLongPress,
       required this.radius,
+      this.backgroundColor,
       required this.color,
       required this.icon,
       this.iconSize})
@@ -15,6 +16,7 @@ class CircleButton extends StatelessWidget {
   final void Function()? onLongPress;
 
   final double radius;
+  final Color? backgroundColor;
   final Color color;
   final IconData icon;
   final double? iconSize;
@@ -26,7 +28,7 @@ class CircleButton extends StatelessWidget {
         width: radius * 2,
         decoration: BoxDecoration(
           shape: BoxShape.circle,
-          color: Theme.of(context).colorScheme.primary,
+          color: backgroundColor ?? Theme.of(context).colorScheme.primary,
           boxShadow: [
             BoxShadow(
               color: Theme.of(context).shadowColor,