feat: improve file_tree_view display on mobile (#862)

ui/flutter/lib/app/modules/create/views/create_view.dart

@@ -1,5 +1,4 @@
 import 'package:autoscale_tabbarview/autoscale_tabbarview.dart';
-import 'package:checkable_treeview/checkable_treeview.dart';
 import 'package:desktop_drop/desktop_drop.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
@@ -17,7 +16,6 @@ import '../../../../database/database.dart';
 import '../../../../util/input_formatter.dart';
 import '../../../../util/message.dart';
 import '../../../../util/util.dart';
-import '../../../../util/extensions.dart';
 import '../../../routes/app_pages.dart';
 import '../../../views/compact_checkbox.dart';
 import '../../../views/directory_selector.dart';
@@ -42,7 +40,6 @@ class CreateView extends GetView<CreateController> {
   final _httpCookieController = TextEditingController();
   final _httpRefererController = TextEditingController();
   final _btTrackerController = TextEditingController();
-  final _fileTreeViewKey = GlobalKey<TreeViewState<int>>();
 
   final _availableSchemes = ["http:", "https:", "magnet:"];
 

ui/flutter/lib/app/views/file_tree_view.dart

@@ -7,6 +7,7 @@ import '../../api/model/resource.dart';
 import '../../icon/gopeed_icons.dart';
 import '../../util/util.dart';
 import 'file_icon.dart';
+import 'responsive_builder.dart';
 import 'sort_icon_button.dart';
 
 const _toggleSwitchIcons = [
@@ -53,6 +54,52 @@ class _FileTreeViewState extends State<FileTreeView> {
             widget.files.length;
     final selectedFileSize = calcSelectedSize(null);
 
+    final filterRow = InkWell(
+      onTap: () {},
+      child: ToggleSwitch(
+        minHeight: 32,
+        cornerRadius: 8,
+        doubleTapDisable: true,
+        inactiveBgColor: Theme.of(context).dividerColor,
+        activeBgColor: [Theme.of(context).colorScheme.primary],
+        initialLabelIndex: toggleSwitchIndex,
+        icons: _toggleSwitchIcons,
+        onToggle: (index) {
+          toggleSwitchIndex = index;
+          if (index == null) {
+            key.currentState?.setSelectedValues(List.empty());
+            return;
+          }
+
+          final iconFileExtArr = iconConfigMap[_toggleSwitchIcons[index]] ?? [];
+          final selectedFileIndexes = widget.files
+              .asMap()
+              .entries
+              .where((e) => iconFileExtArr.contains(fileExt(e.value.name)))
+              .map((e) => e.key)
+              .toList();
+          key.currentState?.setSelectedValues(selectedFileIndexes);
+        },
+      ),
+    );
+    final countRow = Row(
+      children: [
+        Text('fileSelectedCount'.tr),
+        Text(
+          selectedFileCount.toString(),
+          style: Theme.of(context).textTheme.bodySmall,
+        ),
+        const SizedBox(width: 12),
+        Text('fileSelectedSize'.tr),
+        Text(
+          selectedFileCount > 0 && selectedFileSize == 0
+              ? 'unknown'.tr
+              : Util.fmtByte(selectedFileSize),
+          style: Theme.of(context).textTheme.bodySmall,
+        ),
+      ],
+    );
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -141,66 +188,23 @@ class _FileTreeViewState extends State<FileTreeView> {
           ),
         ),
         const SizedBox(height: 12),
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            Flexible(
-              flex: 4,
-              child: InkWell(
-                onTap: () {},
-                child: ToggleSwitch(
-                  minHeight: 32,
-                  cornerRadius: 8,
-                  doubleTapDisable: true,
-                  inactiveBgColor: Theme.of(context).dividerColor,
-                  activeBgColor: [Theme.of(context).colorScheme.primary],
-                  initialLabelIndex: toggleSwitchIndex,
-                  icons: _toggleSwitchIcons,
-                  onToggle: (index) {
-                    toggleSwitchIndex = index;
-                    if (index == null) {
-                      key.currentState?.setSelectedValues(List.empty());
-                      return;
-                    }
-
-                    final iconFileExtArr =
-                        iconConfigMap[_toggleSwitchIcons[index]] ?? [];
-                    final selectedFileIndexes = widget.files
-                        .asMap()
-                        .entries
-                        .where((e) =>
-                            iconFileExtArr.contains(fileExt(e.value.name)))
-                        .map((e) => e.key)
-                        .toList();
-                    key.currentState?.setSelectedValues(selectedFileIndexes);
-                  },
-                ),
-              ),
-            ),
-            Flexible(
-              flex: 6,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.end,
+        !ResponsiveBuilder.isNarrow(context)
+            ? Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  Text('fileSelectedCount'.tr),
-                  Text(
-                    selectedFileCount.toString(),
-                    style: Theme.of(context).textTheme.bodySmall,
-                  ),
-                  const SizedBox(width: 12),
-                  Text('fileSelectedSize'.tr),
-                  Text(
-                    selectedFileCount > 0 && selectedFileSize == 0
-                        ? 'unknown'.tr
-                        : Util.fmtByte(selectedFileSize),
-                    style: Theme.of(context).textTheme.bodySmall,
-                  ),
+                  filterRow,
+                  countRow,
+                ],
+              )
+            : Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  filterRow,
+                  const SizedBox(height: 8),
+                  countRow,
                 ],
               ),
-            ),
-          ],
-        ),
       ],
     );
   }