Fixed UI representation of server reorder page (#372)

lib/view/page/setting/seq/srv_seq.dart

@@ -1,3 +1,4 @@
+import 'dart:ui';
 import 'package:fl_lib/fl_lib.dart';
 import 'package:flutter/material.dart';
 import 'package:toolbox/core/extension/context/locale.dart';
@@ -22,6 +23,29 @@ class _ServerOrderPageState extends State<ServerOrderPage> {
     );
   }
 
+  Widget _proxyDecorator(Widget child, int index, Animation<double> animation) {
+    return AnimatedBuilder(
+      animation: animation,
+      builder: (BuildContext context, Widget? child) {
+        final double animValue = Curves.easeInOut.transform(animation.value);
+        final double elevation = lerpDouble(1, 6, animValue)!;
+        final double scale = lerpDouble(1, 1.02, animValue)!;
+        return Transform.scale(
+          scale: scale,
+          // Create a Card based on the color and the content of the dragged one
+          // and set its elevation to the animated value.
+          child: Card(
+            elevation: elevation,
+            // color: cards[index].color,
+            // child: cards[index].child,
+            child: _buildCardTile(index),
+          ),
+        );
+      },
+      // child: child,
+    );
+  }
+
   Widget _buildBody() {
     if (Pros.server.serverOrder.isEmpty) {
       return Center(child: Text(l10n.noServerAvailable));
@@ -37,28 +61,36 @@ class _ServerOrderPageState extends State<ServerOrderPage> {
       }),
       padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
       buildDefaultDragHandles: false,
-      itemBuilder: (_, idx) => _buildItem(idx, Pros.server.serverOrder[idx]),
+      itemBuilder: (_, idx) => _buildItem(idx),
       itemCount: Pros.server.serverOrder.length,
+      proxyDecorator: _proxyDecorator,
     );
   }
 
-  Widget _buildItem(int index, String id) {
+  Widget _buildItem(int index) {
+    return ReorderableDelayedDragStartListener(
+      key: ValueKey('$index'),
+      index: index,
+      child: CardX(child: _buildCardTile(index)),
+    );
+  }
+
+  Widget _buildCardTile(int index) {
+    final id = Pros.server.serverOrder[index];
     final spi = Pros.server.pick(id: id)?.spi;
     if (spi == null) {
       return const SizedBox();
     }
-    return ReorderableDelayedDragStartListener(
+
-      key: ValueKey('$index'),
+    return ListTile(
-      index: index,
+      title: Text(spi.name),
-      child: CardX(
+      subtitle: Text(spi.id, style: UIs.textGrey),
-        child: ListTile(
+      leading: CircleAvatar(
-          title: Text(spi.name),
+        child: Text(spi.name[0]),
-          subtitle: Text(spi.id, style: UIs.textGrey),
+      ),
-          leading: CircleAvatar(
+      trailing: ReorderableDragStartListener(
-            child: Text(spi.name[0]),
+        index: index,
-          ),
+        child: const Icon(Icons.drag_handle),
-          trailing: const Icon(Icons.drag_handle),
-        ),
       ),
     );
   }