reorderable animated_boxes.dart

Author: Vivek Chib

lib/main.dart

@@ -6,15 +6,19 @@ import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'utils/theme/theme_provider.dart';
 import 'views/home_page.dart';
+import 'views/widgets/animated_box/provider.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
   final pref = await SharedPreferences.getInstance();
 
   runApp(
-    ChangeNotifierProvider(
-      create: (context) => ThemeProvider(pref: pref),
+    MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (context) => ThemeProvider(pref: pref)),
+        ChangeNotifierProvider(create: (context) => AnimatedBoxesProvider(pref: pref)),
+      ],
       child: const MyApp(),
     ),
   );

lib/views/home_page.dart

@@ -1,12 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_curve_visualizer/model/curve_model.dart';
+import 'package:flutter_curve_visualizer/views/widgets/animated_box/animated_box_widget.dart';
 import 'package:flutter_curve_visualizer/views/widgets/screen_mode.dart';
 import 'package:flutter_curve_visualizer/utils/curves_enum.dart';
 import 'package:flutter_curve_visualizer/views/widgets/appbar.dart';
 import 'package:flutter_curve_visualizer/views/widgets/dropdown_menu.dart';
 import 'package:flutter_curve_visualizer/views/widgets/graph/graph_widget.dart';
+import 'package:provider/provider.dart';
 import 'widgets/animated_box/animated_boxes.dart';
+import 'widgets/animated_box/provider.dart';
 import 'widgets/code_block.dart';
 import 'widgets/cubic_curve_input_widget.dart';
 
@@ -152,7 +155,26 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
         ),
 
         // Box Animations
-        AnimationBoxes(curveAnimation: curveAnimation),
+        Consumer<AnimatedBoxesProvider>(
+          builder: (context, value, child) {
+            final list = value.animationBoxReordableList;
+
+            return AnimationBoxes(
+              curveAnimation: curveAnimation,
+              animationTypes: list,
+              onAcceptWithDetails: (details, item) {
+                final oldIndex = list.indexOf(details.data);
+                final newIndex = list.indexOf(item);
+
+                if (oldIndex != -1 && newIndex != -1) {
+                  list.removeAt(oldIndex);
+                  list.insert(newIndex, details.data);
+                  value.saveList(list);
+                }
+              },
+            );
+          },
+        ),
         SizedBox(height: spacing * 2),
       ],
     );

lib/views/widgets/animated_box/animated_boxes.dart

@@ -1,43 +1,82 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_curve_visualizer/utils/extension/string.dart';
 import 'package:flutter_curve_visualizer/views/widgets/screen_mode.dart';
-
 import 'animated_box_widget.dart';
 
 class AnimationBoxes extends StatelessWidget {
-  const AnimationBoxes({super.key, required this.curveAnimation});
+  const AnimationBoxes({
+    super.key,
+    required this.curveAnimation,
+    required this.animationTypes,
+    required this.onAcceptWithDetails,
+  });
 
+  final List<int> animationTypes;
   final CurvedAnimation curveAnimation;
+  final void Function(DragTargetDetails<int> details, int newIndex)?
+      onAcceptWithDetails;
 
   @override
   Widget build(BuildContext context) {
     final screenMode = ScreenModeWidget.of(context);
 
     final spacing = screenMode.spacing;
 
+    const boxSize = 100.0;
+
     return SizedBox(
       width: MediaQuery.of(context).size.width /
           (screenMode.isMobileOrTablet ? 1 : 2),
       child: Wrap(
+        key: ValueKey(animationTypes),
         spacing: spacing / 2,
         runSpacing: spacing / 2,
         runAlignment: WrapAlignment.center,
         alignment: WrapAlignment.center,
-        children: AnimationType.values.map(
-          (animationType) {
-            return Column(
-              mainAxisAlignment: MainAxisAlignment.start,
-              spacing: 8.0,
-              children: [
-                Text(animationType.name.capitalizeFirst()),
-                SizedBox.square(
-                  dimension: 100,
-                  child: AnimatedBoxWidget(
-                    animationType: animationType,
-                    animation: curveAnimation,
+        children: animationTypes.map(
+          (index) {
+            return DragTarget<int>(
+              onWillAcceptWithDetails: (_) => true,
+              onAcceptWithDetails: (details) =>
+                  onAcceptWithDetails?.call(details, index),
+              builder: (_, __, ___) {
+                final child = Column(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  spacing: 8.0,
+                  children: [
+                    Text(AnimationType.values[index].name.capitalizeFirst()),
+                    SizedBox.square(
+                      dimension: boxSize,
+                      child: AnimatedBoxWidget(
+                        animationType: AnimationType.values[index],
+                        animation: curveAnimation,
+                      ),
+                    ),
+                  ],
+                );
+
+                return MouseRegion(
+                  cursor: SystemMouseCursors.grab,
+                  child: Draggable(
+                    data: index,
+                    childWhenDragging: Column(
+                      children: [
+                        Text(""),
+                        SizedBox.square(dimension: boxSize),
+                      ],
+                    ),
+                    feedback: AnimatedScale(
+                      scale: 1.150,
+                      duration: 200.ms,
+                      child: Material(
+                        child: child,
+                      ),
+                    ),
+                    child: child,
                   ),
-                ),
-              ],
+                );
+              },
             );
           },
         ).toList(),

lib/views/widgets/animated_box/provider.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import 'animated_box_widget.dart';
+
+const key = 'animationBoxReordableList';
+
+class AnimatedBoxesProvider extends ChangeNotifier {
+  final SharedPreferences pref;
+
+  AnimatedBoxesProvider({required this.pref}) {
+    getList();
+  }
+
+  late List<int> animationBoxReordableList;
+
+  void getList() {
+    final list = pref.getStringList(key);
+
+    if (list != null && list.isNotEmpty) {
+      animationBoxReordableList = list.map((e) => int.parse(e)).toList();
+    } else {
+      animationBoxReordableList =
+          List.generate(AnimationType.values.length, (index) => index);
+    }
+
+    notifyListeners();
+  }
+
+  void saveList(List<int> list) {
+    pref.setStringList(key, list.map((e) => e.toString()).toList());
+    animationBoxReordableList = list;
+    notifyListeners();
+  }
+}

lib/views/widgets/code_block.dart

@@ -12,9 +12,11 @@ class CodeBlock extends StatelessWidget {
 
     if (!context.mounted) return;
 
-    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(content: Text('Copied to clipboard')),
-    );
+    ScaffoldMessenger.of(context)
+      ..clearSnackBars()
+      ..showSnackBar(
+        const SnackBar(content: Text('Copied to clipboard')),
+      );
   }
 
   @override

lib/views/widgets/cubic_graph.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'screen_mode.dart';
+
 class CubicGraph extends StatefulWidget {
   const CubicGraph({super.key});
 
@@ -13,18 +15,6 @@ class _CubicGraphState extends State<CubicGraph> {
   bool isDraggingX2 = false;
   bool isDraggingY2 = false;
 
-  // Size of the actual graph area
-  static const graphSize = Size(350, 300);
-
-  // Size of the draggable area
-  static const containerSize = Size(500, 500);
-
-  // Offset to center the graph in the container
-  static final graphOffset = Offset(
-    (containerSize.width - graphSize.width) / 2,
-    (containerSize.height - graphSize.height) / 2,
-  );
-
   void _updatePosition(Offset position) {
     setState(() {
       if (isDraggingX2) {
@@ -37,20 +27,25 @@ class _CubicGraphState extends State<CubicGraph> {
 
   @override
   Widget build(BuildContext context) {
+    final screenSize = MediaQuery.sizeOf(context);
+
+    // Size of the actual graph area
+    final graphSize = Size(350, 300);
+
+    // Size of the draggable area
+    final containerSize = Size(screenSize.width, screenSize.height);
+
+    // Offset to center the graph in the container
+    final graphOffset = Offset(
+      (containerSize.width - graphSize.width) / 2,
+      (containerSize.height - graphSize.height) / 2,
+    );
+
     return MouseRegion(
       cursor: isDraggingX2 || isDraggingY2
           ? SystemMouseCursors.grabbing
           : SystemMouseCursors.basic,
       child: GestureDetector(
-        onTapDown: (details) {
-          final pos = details.localPosition;
-          if ((pos - (x2Position + graphOffset)).distance < 20) {
-            setState(() => isDraggingX2 = true);
-          } else if ((pos - (y2Position + graphOffset)).distance < 20) {
-            setState(() => isDraggingY2 = true);
-          }
-          _updatePosition(details.localPosition - graphOffset);
-        },
         onPanStart: (details) {
           final pos = details.localPosition;
           if ((pos - (x2Position + graphOffset)).distance < 20) {