#140 feat: double columns of servers tab

lib/core/extension/media_queryx.dart

@@ -0,0 +1,5 @@
+import 'package:flutter/widgets.dart';
+
+extension MideaQueryX on MediaQueryData {
+  bool get isLarge => size.aspectRatio > 0.87 && size.width > 600;
+}

lib/view/page/server/tab.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:get_it/get_it.dart';
 import 'package:provider/provider.dart';
+import 'package:toolbox/core/extension/media_queryx.dart';
 import 'package:toolbox/core/extension/order.dart';
 import 'package:toolbox/data/model/app/net_view.dart';
 import 'package:toolbox/data/model/server/snippet.dart';
@@ -54,6 +55,7 @@ class _ServerPageState extends State<ServerPage>
   late S _s;
 
   String? _tag;
+  bool _buildGrid = false;
 
   @override
   void initState() {
@@ -66,6 +68,7 @@ class _ServerPageState extends State<ServerPage>
   void didChangeDependencies() {
     super.didChangeDependencies();
     _media = MediaQuery.of(context);
+    _buildGrid = _media.isLarge;
     _theme = Theme.of(context);
     _s = S.of(context)!;
   }
@@ -88,10 +91,7 @@ class _ServerPageState extends State<ServerPage>
   }
 
   Widget _buildBody() {
-    return RefreshIndicator(
+    final child = Consumer<ServerProvider>(
-      onRefresh: () async =>
-          await _serverProvider.refreshData(onlyFailed: true),
-      child: Consumer<ServerProvider>(
       builder: (_, pro, __) {
         if (!pro.tags.contains(_tag)) {
           _tag = null;
@@ -104,12 +104,31 @@ class _ServerPageState extends State<ServerPage>
             ),
           );
         }
-          final filtered = pro.serverOrder
+
+        final filtered = _filterServers(pro);
+        if (_buildGrid) {
+          return _buildBodyMedium(pro);
+        }
+        return _buildBodySmall(pro, filtered);
+      },
+    );
+    if (isDesktop) {
+      return child;
+    }
+    return RefreshIndicator(
+      onRefresh: () async =>
+          await _serverProvider.refreshData(onlyFailed: true),
+      child: child,
+    );
+  }
+
+  List<String> _filterServers(ServerProvider pro) => pro.serverOrder
       .where((e) => pro.servers.containsKey(e))
       .where((e) =>
-                  _tag == null ||
+          _tag == null || (pro.servers[e]?.spi.tags?.contains(_tag) ?? false))
-                  (pro.servers[e]?.spi.tags?.contains(_tag) ?? false))
       .toList();
+
+  Widget _buildBodySmall(ServerProvider pro, List<String> filtered) {
     return ReorderableListView.builder(
       header: TagSwitcher(
         tags: pro.tags,
@@ -138,8 +157,21 @@ class _ServerPageState extends State<ServerPage>
       ),
       itemCount: filtered.length,
     );
-        },
+  }
+
+  Widget _buildBodyMedium(ServerProvider pro) {
+    final filtered = _filterServers(pro);
+    final left = filtered.where((e) => filtered.indexOf(e) % 2 == 0).toList();
+    final right = filtered.where((e) => filtered.indexOf(e) % 2 == 1).toList();
+    return Row(
+      children: [
+        Expanded(
+          child: _buildBodySmall(pro, left),
         ),
+        Expanded(
+          child: _buildBodySmall(pro, right),
+        ),
+      ],
     );
   }
 
@@ -147,6 +179,7 @@ class _ServerPageState extends State<ServerPage>
     if (si == null) {
       return placeholder;
     }
+
     return GestureDetector(
       key: Key(si.spi.id + (_tag ?? '')),
       onTap: () {
@@ -184,7 +217,6 @@ class _ServerPageState extends State<ServerPage>
       height = 137;
       children = [
         _buildServerCardTitle(ss, cs, spi),
-        height13,
         Row(
           mainAxisAlignment: MainAxisAlignment.spaceAround,
           children: [
@@ -195,16 +227,6 @@ class _ServerPageState extends State<ServerPage>
                 'Total:\n${rootDisk?.size}', 'Used:\n${rootDisk?.usedPercent}%')
           ],
         ),
-        height13,
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceAround,
-          children: [
-            _buildExplainText('CPU'),
-            _buildExplainText('Mem'),
-            _buildExplainText('Net'),
-            _buildExplainText('Disk'),
-          ],
-        ),
         const SizedBox(height: 3),
       ];
     }
@@ -214,6 +236,7 @@ class _ServerPageState extends State<ServerPage>
       curve: Curves.fastEaseInToSlowEaseOut,
       height: height,
       child: Column(
+        mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: children,
       ),
@@ -389,14 +412,11 @@ class _ServerPageState extends State<ServerPage>
   }
 
   Widget _buildExplainText(String text) {
-    return SizedBox(
+    return Text(
-      width: _media.size.width * 0.2,
-      child: Text(
         text,
         style: const TextStyle(fontSize: 12),
         textAlign: TextAlign.center,
         textScaleFactor: 1.0,
-      ),
       );
   }
 
@@ -435,9 +455,7 @@ class _ServerPageState extends State<ServerPage>
   Widget _buildIOData(String up, String down) {
     final statusTextStyle = TextStyle(
         fontSize: 9, color: _theme.textTheme.bodyLarge!.color!.withAlpha(177));
-    return SizedBox(
+    return Column(
-      width: _media.size.width * 0.2,
-      child: Column(
         children: [
           const SizedBox(height: 5),
           Text(
@@ -454,16 +472,13 @@ class _ServerPageState extends State<ServerPage>
             textScaleFactor: 1.0,
           )
         ],
-      ),
       );
   }
 
   Widget _buildPercentCircle(double percent) {
     if (percent <= 0) percent = 0.01;
     if (percent >= 100) percent = 99.9;
-    return SizedBox(
+    return Stack(
-      width: _media.size.width * 0.2,
-      child: Stack(
         children: [
           Center(
             child: CircleChart(
@@ -485,7 +500,6 @@ class _ServerPageState extends State<ServerPage>
             ),
           ),
         ],
-      ),
     );
   }