Improved modal bottom sheets

lib/screens/clients/added_list.dart

@@ -1,7 +1,8 @@
 // ignore_for_file: use_build_context_synchronously
 
-import 'package:animations/animations.dart';
 import 'package:flutter/material.dart';
+import 'package:animations/animations.dart';
+import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter/rendering.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -139,15 +140,21 @@ class _AddedListState extends State<AddedList> {
     }
 
     void openClientModal(Client client) {
-      showModalBottomSheet(
+      showFlexibleBottomSheet(
+        minHeight: 0.6,
+        initHeight: 0.6,
+        maxHeight: 0.95,
+        isCollapsible: true,
+        duration: const Duration(milliseconds: 250),
+        anchors: [0.95],
         context: context, 
-        builder: (ctx) => ClientModal(
+        builder: (ctx, controller, offset) => ClientModal(
+          scrollController: controller,
           client: client,
           onConfirm: confirmEditClient,
           onDelete: deleteClient,
         ),
-        isScrollControlled: true,
+        bottomSheetColor: Colors.transparent
-        backgroundColor: Colors.transparent
       );
     }
 

lib/screens/clients/client_modal.dart

@@ -11,12 +11,14 @@ import 'package:adguard_home_manager/providers/servers_provider.dart';
 import 'package:adguard_home_manager/models/clients.dart';
 
 class ClientModal extends StatefulWidget {
+  final ScrollController scrollController;
   final Client? client;
   final void Function(Client) onConfirm;
   final void Function(Client)? onDelete;
 
   const ClientModal({
     Key? key,
+    required this.scrollController,
     this.client,
     required this.onConfirm,
     this.onDelete,
@@ -249,11 +251,7 @@ class _ClientModalState extends State<ClientModal> {
 
     return Padding(
       padding: MediaQuery.of(context).viewInsets,
-      child: DraggableScrollableSheet(
+      child: Container(
-        initialChildSize: 0.6,
-        minChildSize: 0.6,
-        maxChildSize: 0.95,
-        builder: (context, scrollController) =>  Container(
         decoration: BoxDecoration(
           color: Theme.of(context).dialogBackgroundColor,
           borderRadius: const BorderRadius.only(
@@ -265,7 +263,7 @@ class _ClientModalState extends State<ClientModal> {
           children: [
             Expanded(
               child: ListView(
-                  controller: scrollController,
+                controller: widget.scrollController,
                 children: [
                   const SizedBox(height: 28),
                   const Icon(
@@ -702,7 +700,6 @@ class _ClientModalState extends State<ClientModal> {
           ],
         ),
       ),
-      ),
     );
   }
 }

lib/screens/clients/fab.dart

@@ -2,6 +2,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/screens/clients/client_modal.dart';
@@ -113,13 +114,19 @@ class ClientsFab extends StatelessWidget {
     }
 
     void openAddClient() {
-      showModalBottomSheet(
+      showFlexibleBottomSheet(
+        minHeight: 0.6,
+        initHeight: 0.6,
+        maxHeight: 0.95,
+        isCollapsible: true,
+        duration: const Duration(milliseconds: 250),
+        anchors: [0.95],
         context: context, 
-        builder: (ctx) => ClientModal(
+        builder: (ctx, controller, offset) => ClientModal(
+          scrollController: controller,
           onConfirm: confirmAddClient
         ),
-        isScrollControlled: true,
+        bottomSheetColor: Colors.transparent
-        backgroundColor: Colors.transparent
       );
     }
 

lib/screens/filters/filters_list.dart

@@ -2,8 +2,8 @@
 
 import 'dart:io';
 
-import 'package:adguard_home_manager/screens/filters/delete_list_modal.dart';
 import 'package:flutter/material.dart';
+import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -11,6 +11,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:adguard_home_manager/screens/filters/fab.dart';
 import 'package:adguard_home_manager/screens/filters/list_details_modal.dart';
 import 'package:adguard_home_manager/screens/filters/add_list_modal.dart';
+import 'package:adguard_home_manager/screens/filters/delete_list_modal.dart';
 
 import 'package:adguard_home_manager/services/http_requests.dart';
 import 'package:adguard_home_manager/classes/process_modal.dart';
@@ -212,9 +213,16 @@ class _FiltersListState extends State<FiltersList> {
     }
 
     void openDetailsModal(Filter filter) {
-      showModalBottomSheet(
+      showFlexibleBottomSheet(
+        minHeight: 0.6,
+        initHeight: 0.6,
+        maxHeight: (filter.enabled == true ? 774 : 755)/MediaQuery.of(context).size.height,
+        isCollapsible: true,
+        duration: const Duration(milliseconds: 250),
+        anchors: [(filter.enabled == true ? 774 : 755)/MediaQuery.of(context).size.height],
         context: context, 
-        builder: (ctx) => ListDetailsModal(
+        builder: (ctx, controller, offset) => ListDetailsModal(
+          scrollController: controller,
           list: filter, 
           type: widget.type,
           onDelete: (Filter list, String type) {
@@ -242,8 +250,7 @@ class _FiltersListState extends State<FiltersList> {
           },
           onEnableDisable: enableDisableList,
         ),
-        backgroundColor: Colors.transparent,
+        bottomSheetColor: Colors.transparent
-        isScrollControlled: true
       );
     }
 

lib/screens/filters/list_details_modal.dart

@@ -7,6 +7,7 @@ import 'package:adguard_home_manager/functions/format_time.dart';
 import 'package:adguard_home_manager/models/filtering.dart';
 
 class ListDetailsModal extends StatelessWidget {
+  final ScrollController scrollController;
   final Filter list;
   final String type;
   final void Function(Filter, String) onDelete;
@@ -15,6 +16,7 @@ class ListDetailsModal extends StatelessWidget {
 
   const ListDetailsModal({
     Key? key,
+    required this.scrollController,
     required this.list,
     required this.type,
     required this.onDelete,
@@ -24,13 +26,7 @@ class ListDetailsModal extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DraggableScrollableSheet(
+    return Container(
-      initialChildSize: 0.6,
-      minChildSize: 0.6,
-      maxChildSize: list.lastUpdated != null
-        ? 740/MediaQuery.of(context).size.height
-        : 670/MediaQuery.of(context).size.height,
-      builder: (context, scrollController) => Container(
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.only(
           topLeft: Radius.circular(28),
@@ -41,6 +37,11 @@ class ListDetailsModal extends StatelessWidget {
       child: Column(
         children: [
           Expanded(
+            child: NotificationListener<OverscrollIndicatorNotification>(
+              onNotification: (overscroll) {
+                overscroll.disallowIndicator();
+                return false;
+              },
               child: ListView(
                 controller: scrollController,
                 children: [
@@ -126,6 +127,7 @@ class ListDetailsModal extends StatelessWidget {
                     subtitle: formatTimestampUTC(list.lastUpdated!, 'dd-MM-yyyy HH:mm'), 
                   ),
                 ],
+              ),
             )
           ),
           Padding(
@@ -160,7 +162,6 @@ class ListDetailsModal extends StatelessWidget {
           ),
         ],
       ),
-      ),
     );
   }
 }

lib/screens/logs/log_details_modal.dart

@@ -8,11 +8,13 @@ import 'package:adguard_home_manager/functions/format_time.dart';
 import 'package:adguard_home_manager/models/logs.dart';
 
 class LogDetailsModal extends StatelessWidget {
+  final ScrollController scrollController;
   final Log log;
   final void Function(Log, String) blockUnblock;
 
   const LogDetailsModal({
     Key? key,
+    required this.scrollController,
     required this.log,
     required this.blockUnblock
   }) : super(key: key);
@@ -30,11 +32,7 @@ class LogDetailsModal extends StatelessWidget {
       );
     }
 
-    return DraggableScrollableSheet(
+    return Container(
-      initialChildSize: 0.6,
-      minChildSize: 0.6,
-      maxChildSize: 0.95,
-      builder: (context, controller) => Container(
       decoration: BoxDecoration(
         color: Theme.of(context).dialogBackgroundColor,
         borderRadius: const BorderRadius.only(
@@ -62,7 +60,7 @@ class LogDetailsModal extends StatelessWidget {
           ),
           Expanded(
             child: ListView(
-                controller: controller,
+              controller: scrollController,
               children: [
                 Padding(
                   padding: const EdgeInsets.all(20),
@@ -208,7 +206,6 @@ class LogDetailsModal extends StatelessWidget {
           )
         ],
       ),
-      ),
     );
   }
 }

lib/screens/logs/log_tile.dart

@@ -2,6 +2,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/screens/logs/log_details_modal.dart';
@@ -123,14 +124,20 @@ class LogTile extends StatelessWidget {
     }
     
     void openLogDetailsModal() {
-      showModalBottomSheet(
+      showFlexibleBottomSheet(
+        minHeight: 0.6,
+        initHeight: 0.6,
+        maxHeight: 0.95,
+        isCollapsible: true,
+        duration: const Duration(milliseconds: 250),
+        anchors: [0.95],
         context: context, 
-        builder: (ctx) => LogDetailsModal(
+        builder: (ctx, controller, offset) => LogDetailsModal(
+          scrollController: controller,
           log: log,
           blockUnblock: blockUnblock,
         ),
-        backgroundColor: Colors.transparent,
+        bottomSheetColor: Colors.transparent,
-        isScrollControlled: true
       );
     }
 

pubspec.lock

@@ -36,6 +36,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  bottom_inset_observer:
+    dependency: transitive
+    description:
+      name: bottom_inset_observer
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
+  bottom_sheet:
+    dependency: "direct main"
+    description:
+      name: bottom_sheet
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.2"
   characters:
     dependency: transitive
     description:

pubspec.yaml

@@ -47,6 +47,7 @@ dependencies:
   fl_chart: ^0.55.2
   flutter_web_browser: ^0.17.1
   flutter_svg: ^1.1.5
+  bottom_sheet: ^3.1.2
 
 dev_dependencies:
   flutter_test: