feat: expandable bottom sheet (#482)

* feat: implement and use new bottom sheet controller * feat: use static background color in bottomsheet controller
helpwave · Jan 8, 2024 · b2b3a50 · b2b3a50
1 parent 75f19e4
commit b2b3a50
Show file tree

Hide file tree

Showing 10 changed files with 468 additions and 333 deletions.
diff --git a/apps/tasks/lib/components/patient_bottom_sheet.dart b/apps/tasks/lib/components/patient_bottom_sheet.dart
diff --git a/apps/tasks/lib/components/task_bottom_sheet.dart b/apps/tasks/lib/components/task_bottom_sheet.dart
@@ -91,9 +91,8 @@ class _SheetListTile extends StatelessWidget {
 /// to true as seen in the example below to avoid an overflow
 ///
 /// ```dart
-///   showModalBottomSheet(
+///   context.pushModal(
 ///     context: context,
-///     isScrollControlled: true,
 ///     builder: (context) => TaskBottomSheet(),
 ///   );
 /// ```
@@ -183,7 +182,7 @@ class _TaskBottomSheetState extends State<TaskBottomSheet> {
                     return _SheetListTile(
                       icon: Icons.person,
                       label: context.localization!.assignedTo,
-                      onTap: () => showModalBottomSheet(
+                      onTap: () => context.pushModal(
                         context: context,
                         builder: (BuildContext context) => LoadingAndErrorWidget(
                           state: taskController.state,

diff --git a/apps/tasks/lib/components/task_expansion_tile.dart b/apps/tasks/lib/components/task_expansion_tile.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:helpwave_theme/constants.dart';
+import 'package:helpwave_widget/bottom_sheets.dart';
 import 'package:helpwave_widget/shapes.dart';
 import 'package:tasks/components/task_bottom_sheet.dart';
 import 'package:tasks/components/task_card.dart';
@@ -51,10 +52,9 @@ class TaskExpansionTile extends StatelessWidget {
             .map(
               (task) => GestureDetector(
                 onTap: () {
-                  showModalBottomSheet(
+                  context.pushModal(
                     context: context,
                     builder: (context) => TaskBottomSheet(task: task, patient: task.patient),
-                    isScrollControlled: true,
                   );
                 },
                 child: TaskCard(

diff --git a/apps/tasks/lib/components/user_header.dart b/apps/tasks/lib/components/user_header.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:helpwave_theme/constants.dart';
+import 'package:helpwave_widget/bottom_sheets.dart';
 import 'package:provider/provider.dart';
 import 'package:tasks/components/user_bottom_sheet.dart';
 import 'package:tasks/controllers/user_session_controller.dart';
@@ -23,7 +24,7 @@ class UserHeader extends StatelessWidget implements PreferredSizeWidget {
         leadingWidth: iconSizeSmall,
         leading: GestureDetector(
           onTap: () {
-            showModalBottomSheet(
+            context.pushModal(
               context: context,
               builder: (context) => const UserBottomSheet(),
             );
@@ -57,7 +58,7 @@ class UserHeader extends StatelessWidget implements PreferredSizeWidget {
         ),
         title: GestureDetector(
           onTap: () {
-            showModalBottomSheet(
+            context.pushModal(
               context: context,
               builder: (context) => const UserBottomSheet(),
             );

diff --git a/apps/tasks/lib/components/visibility_select.dart b/apps/tasks/lib/components/visibility_select.dart
@@ -82,7 +82,7 @@ class VisibilitySelect extends StatelessWidget {
       onTap: () => {
         if (isCreating || !isPublicVisible)
           {
-            showModalBottomSheet(
+            context.pushModal(
               context: context,
               builder: (context) => _VisibilityBottomSheet(
                 onChange: onChanged,

diff --git a/apps/tasks/lib/screens/main_screen.dart b/apps/tasks/lib/screens/main_screen.dart
@@ -3,8 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:helpwave_localization/localization.dart';
 import 'package:helpwave_theme/constants.dart';
 import 'package:helpwave_theme/theme.dart';
+import 'package:helpwave_widget/bottom_sheets.dart';
 import 'package:provider/provider.dart';
 import 'package:tasks/components/patient_bottom_sheet.dart';
+import 'package:tasks/components/user_header.dart';
 import 'package:tasks/screens/main_screen_subscreens/my_tasks_screen.dart';
 import 'package:tasks/screens/main_screen_subscreens/patient_screen.dart';
 import 'package:tasks/screens/ward_select_screen.dart';
@@ -41,6 +43,7 @@ class _MainScreenState extends State<MainScreen> {
         return const WardSelectScreen();
       }
       return Scaffold(
+        appBar: const UserHeader(),
         body: [const MyTasksScreen(), const SizedBox(), const PatientScreen()][index],
         floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
         floatingActionButton: isShowingActionButton ? _TaskPatientFloatingActionButton() : null,
@@ -133,10 +136,9 @@ class _TaskPatientFloatingActionButton extends StatelessWidget {
                 child: Center(child: Text(context.localization!.task)),
               ),
               onPressed: () {
-                showModalBottomSheet(
+                context.pushModal(
                   context: context,
                   builder: (context) => TaskBottomSheet(task: Task.empty),
-                  isScrollControlled: true,
                 );
               },
             ),
@@ -158,10 +160,9 @@ class _TaskPatientFloatingActionButton extends StatelessWidget {
                 child: Center(child: Text(context.localization!.patient)),
               ),
               onPressed: () {
-                showModalBottomSheet(
+                context.pushModal(
                   context: context,
                   builder: (context) => const PatientBottomSheet(patentId: ""),
-                  isScrollControlled: true,
                 );
               },
             ),

diff --git a/apps/tasks/lib/screens/main_screen_subscreens/my_tasks_screen.dart b/apps/tasks/lib/screens/main_screen_subscreens/my_tasks_screen.dart
@@ -4,7 +4,6 @@ import 'package:provider/provider.dart';
 import 'package:helpwave_localization/localization.dart';
 import 'package:tasks/components/task_expansion_tile.dart';
 import 'package:helpwave_widget/loading.dart';
-import '../../components/user_header.dart';
 import '../../controllers/my_tasks_controller.dart';
 import '../../dataclasses/task.dart';
 
@@ -21,43 +20,40 @@ class _MyTasksScreenState extends State<MyTasksScreen> {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider(
       create: (_) => MyTasksController(),
-      child: Scaffold(
-        appBar: const UserHeader(),
-        body: Consumer<MyTasksController>(
-          builder: (BuildContext context, MyTasksController tasksController, Widget? child) {
-            return LoadingAndErrorWidget(
-              state: tasksController.state,
-              child: ListView(children: [
-                Theme(
-                  data: Theme.of(context).copyWith(
-                    dividerColor: Colors.transparent,
-                    listTileTheme: const ListTileThemeData(minLeadingWidth: 0, horizontalTitleGap: distanceSmall),
-                  ),
-                  child: Wrap(
-                    spacing: distanceSmall,
-                    children: [
-                      TaskExpansionTile(
-                        tasks: tasksController.todo,
-                        color: upcomingColor,
-                        title: context.localization!.upcoming,
-                      ),
-                      TaskExpansionTile(
-                        tasks: tasksController.inProgress,
-                        color: inProgressColor,
-                        title: context.localization!.inProgress,
-                      ),
-                      TaskExpansionTile(
-                        tasks: tasksController.done,
-                        color: doneColor,
-                        title: context.localization!.done,
-                      ),
-                    ],
-                  ),
+      child: Consumer<MyTasksController>(
+        builder: (BuildContext context, MyTasksController tasksController, Widget? child) {
+          return LoadingAndErrorWidget(
+            state: tasksController.state,
+            child: ListView(children: [
+              Theme(
+                data: Theme.of(context).copyWith(
+                  dividerColor: Colors.transparent,
+                  listTileTheme: const ListTileThemeData(minLeadingWidth: 0, horizontalTitleGap: distanceSmall),
                 ),
-              ]),
-            );
-          },
-        ),
+                child: Wrap(
+                  spacing: distanceSmall,
+                  children: [
+                    TaskExpansionTile(
+                      tasks: tasksController.todo,
+                      color: upcomingColor,
+                      title: context.localization!.upcoming,
+                    ),
+                    TaskExpansionTile(
+                      tasks: tasksController.inProgress,
+                      color: inProgressColor,
+                      title: context.localization!.inProgress,
+                    ),
+                    TaskExpansionTile(
+                      tasks: tasksController.done,
+                      color: doneColor,
+                      title: context.localization!.done,
+                    ),
+                  ],
+                ),
+              ),
+            ]),
+          );
+        },
       ),
     );
   }