mod: use DraggableScrollableSheet

lib/pages/video/detail/introduction/controller.dart

@@ -1,6 +1,6 @@
 import 'dart:async';
 
-import 'package:bottom_sheet/bottom_sheet.dart';
+// import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
@@ -531,25 +531,31 @@ class VideoIntroController extends GetxController {
   }
 
   // 设置关注分组
-  void setFollowGroup() {
-    showFlexibleBottomSheet(
-      bottomSheetBorderRadius: const BorderRadius.only(
-        topLeft: Radius.circular(16),
-        topRight: Radius.circular(16),
-      ),
-      minHeight: 0.6,
-      initHeight: 0.6,
-      maxHeight: 1,
+  void setFollowGroup() async {
+    final mediaQueryData = MediaQuery.of(Get.context!);
+    final contentHeight = mediaQueryData.size.height - kToolbarHeight;
+    final double initialChildSize =
+        (contentHeight - Get.width * 9 / 16) / contentHeight;
+    await showModalBottomSheet(
       context: Get.context!,
-      builder: (BuildContext context, ScrollController scrollController,
-          double offset) {
-        return GroupPanel(
-          mid: videoDetail.value.owner!.mid!,
-          scrollController: scrollController,
+      useSafeArea: true,
+      isScrollControlled: true,
+      builder: (BuildContext context) {
+        return DraggableScrollableSheet(
+          initialChildSize: initialChildSize,
+          minChildSize: 0,
+          maxChildSize: 1,
+          snap: true,
+          expand: false,
+          snapSizes: [initialChildSize],
+          builder: (BuildContext context, ScrollController scrollController) {
+            return GroupPanel(
+              mid: videoDetail.value.owner!.mid!,
+              scrollController: scrollController,
+            );
+          },
         );
       },
-      anchors: [0.6, 1],
-      isSafeArea: true,
     );
   }
 

lib/pages/video/detail/introduction/view.dart

@@ -1,4 +1,4 @@
-import 'package:bottom_sheet/bottom_sheet.dart';
+// import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:expandable/expandable.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
@@ -199,25 +199,35 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
     }
   }
 
-  void _showFavPanel() {
-    showFlexibleBottomSheet(
-      bottomSheetBorderRadius: const BorderRadius.only(
-        topLeft: Radius.circular(16),
-        topRight: Radius.circular(16),
+  void _showFavPanel() async {
+    final mediaQueryData = MediaQuery.of(context);
+    final contentHeight = mediaQueryData.size.height - kToolbarHeight;
+    final double initialChildSize =
+        (contentHeight - Get.width * 9 / 16) / contentHeight;
+    await showModalBottomSheet(
+      context: Get.context!,
+      useSafeArea: true,
+      isScrollControlled: true,
+      transitionAnimationController: AnimationController(
+        duration: const Duration(milliseconds: 200),
+        vsync: this,
       ),
-      minHeight: 0.6,
-      initHeight: 0.6,
-      maxHeight: 1,
-      context: context,
-      builder: (BuildContext context, ScrollController scrollController,
-          double offset) {
-        return FavPanel(
-          ctr: videoIntroController,
-          scrollController: scrollController,
+      builder: (BuildContext context) {
+        return DraggableScrollableSheet(
+          initialChildSize: initialChildSize,
+          minChildSize: 0,
+          maxChildSize: 1,
+          snap: true,
+          expand: false,
+          snapSizes: [initialChildSize],
+          builder: (BuildContext context, ScrollController scrollController) {
+            return FavPanel(
+              ctr: videoIntroController,
+              scrollController: scrollController,
+            );
+          },
         );
       },
-      anchors: [0.6, 1],
-      isSafeArea: true,
     );
   }
 

lib/pages/video/detail/introduction/widgets/fav_panel.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/common/widgets/http_error.dart';
@@ -32,8 +31,14 @@ class _FavPanelState extends State<FavPanel> {
         AppBar(
           centerTitle: false,
           elevation: 0,
-          automaticallyImplyLeading: false,
-          leadingWidth: 0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.vertical(
+              top: Radius.circular(20),
+            ),
+          ),
+          leading: IconButton(
+              onPressed: () => Get.back(),
+              icon: const Icon(Icons.close_outlined)),
           title: Text(
             '选择收藏夹',
             style: Theme.of(context)
@@ -92,7 +97,7 @@ class _FavPanelState extends State<FavPanel> {
                   }
                 } else {
                   // 骨架屏
-                  return const Text('请求中');
+                  return const Center(child: Text('请求中'));
                 }
               },
             ),

lib/pages/video/detail/introduction/widgets/group_panel.dart

@@ -59,10 +59,19 @@ class _GroupPanelState extends State<GroupPanel> {
         AppBar(
           centerTitle: false,
           elevation: 0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.vertical(
+              top: Radius.circular(20),
+            ),
+          ),
           leading: IconButton(
               onPressed: () => Get.back(),
               icon: const Icon(Icons.close_outlined)),
-          title: Text('设置关注分组', style: Theme.of(context).textTheme.titleMedium),
+          title: Text('设置关注分组',
+              style: Theme.of(context)
+                  .textTheme
+                  .titleMedium!
+                  .copyWith(fontWeight: FontWeight.bold)),
         ),
         Expanded(
           child: Material(
@@ -115,7 +124,7 @@ class _GroupPanelState extends State<GroupPanel> {
                   }
                 } else {
                   // 骨架屏
-                  return const Text('请求中');
+                  return const Center(child: Text('请求中'));
                 }
               },
             ),