Lift SheetViewport above sheet widget (#287)

## Related issues (optional) Closes #277. ## Summary (check all that apply) - [x] Modified / added code - [x] Modified / added tests - [x] Modified / added examples - [ ] Modified / added others (pubspec.yaml, workflows, etc...) - [ ] Updated README - [x] Contains breaking changes - [ ] Created / updated migration guide - [ ] Incremented version number - [ ] Updated CHANGELOG
fujidaiti · Nov 25, 2024 · 5fad0b8 · 5fad0b8
1 parent 1166df3
commit 5fad0b8
Show file tree

Hide file tree

Showing 47 changed files with 680 additions and 654 deletions.
diff --git a/example/lib/showcase/ai_playlist_generator.dart b/example/lib/showcase/ai_playlist_generator.dart
@@ -188,14 +188,16 @@ class _SheetShell extends StatelessWidget {
             }
           }
         },
-        child: NavigationSheet(
-          transitionObserver: sheetTransitionObserver,
-          child: Material(
-            // Add circular corners to the sheet.
-            borderRadius: BorderRadius.circular(16),
-            clipBehavior: Clip.antiAlias,
-            color: Theme.of(context).colorScheme.surface,
-            child: navigator,
+        child: SheetViewport(
+          child: NavigationSheet(
+            transitionObserver: sheetTransitionObserver,
+            child: Material(
+              // Add circular corners to the sheet.
+              borderRadius: BorderRadius.circular(16),
+              clipBehavior: Clip.antiAlias,
+              color: Theme.of(context).colorScheme.surface,
+              child: navigator,
+            ),
           ),
         ),
       ),

diff --git a/example/lib/showcase/airbnb_mobile_app.dart b/example/lib/showcase/airbnb_mobile_app.dart
@@ -175,20 +175,22 @@ class _ContentSheet extends StatelessWidget {
           ),
         );
 
-        return ScrollableSheet(
-          physics: sheetPhysics,
-          minPosition: minSheetPosition,
-          child: SizedBox(
-            height: sheetHeight,
-            child: const Card(
-              margin: EdgeInsets.zero,
-              clipBehavior: Clip.antiAlias,
-              shape: sheetShape,
-              child: Column(
-                children: [
-                  _ContentSheetHandle(),
-                  Expanded(child: _HouseList()),
-                ],
+        return SheetViewport(
+          child: ScrollableSheet(
+            physics: sheetPhysics,
+            minPosition: minSheetPosition,
+            child: SizedBox(
+              height: sheetHeight,
+              child: const Card(
+                margin: EdgeInsets.zero,
+                clipBehavior: Clip.antiAlias,
+                shape: sheetShape,
+                child: Column(
+                  children: [
+                    _ContentSheetHandle(),
+                    Expanded(child: _HouseList()),
+                  ],
+                ),
               ),
             ),
           ),

diff --git a/example/lib/showcase/safari/actions.dart b/example/lib/showcase/safari/actions.dart
@@ -8,7 +8,9 @@ void showEditActionsSheet(BuildContext context) {
     CupertinoModalSheetRoute(
       swipeDismissible: true,
       builder: (context) {
-        return const EditActionsSheet();
+        return const SheetViewport(
+          child: EditActionsSheet(),
+        );
       },
     ),
   );

diff --git a/example/lib/showcase/safari/bookmark.dart b/example/lib/showcase/safari/bookmark.dart
@@ -7,9 +7,11 @@ void showEditBookmarkSheet(BuildContext context) {
   Navigator.push(
     context,
     CupertinoModalSheetRoute(
-      builder: (context) => const EditBookmarkSheet(
-        pageUrl: 'https://www.apple.com',
-        faviconUrl: 'https://www.apple.com/favicon.ico',
+      builder: (context) => const SheetViewport(
+        child: EditBookmarkSheet(
+          pageUrl: 'https://www.apple.com',
+          faviconUrl: 'https://www.apple.com/favicon.ico',
+        ),
       ),
     ),
   );

diff --git a/example/lib/showcase/safari/menu.dart b/example/lib/showcase/safari/menu.dart
@@ -11,7 +11,9 @@ void showMenuSheet(BuildContext context) {
     CupertinoModalSheetRoute(
       swipeDismissible: true,
       builder: (context) {
-        return const MenuSheet();
+        return const SheetViewport(
+          child: MenuSheet(),
+        );
       },
     ),
   );

diff --git a/example/lib/showcase/todo_list/todo_editor.dart b/example/lib/showcase/todo_list/todo_editor.dart
@@ -8,7 +8,9 @@ Future<Todo?> showTodoEditor(BuildContext context) {
     context,
     ModalSheetRoute(
       swipeDismissible: true,
-      builder: (context) => const TodoEditor(),
+      builder: (context) => const SheetViewport(
+        child: TodoEditor(),
+      ),
     ),
   );
 }

diff --git a/example/lib/tutorial/bottom_bar_visibility.dart b/example/lib/tutorial/bottom_bar_visibility.dart
@@ -100,8 +100,12 @@ class _ExampleHomeState extends State<_ExampleHome> {
     Navigator.push(
       context,
       ModalSheetRoute(
-        builder: (context) => _ExampleSheet(
-          visibilityType: selectedVisibilityType,
+        builder: (context) => SheetViewport(
+          child: SheetViewport(
+            child: _ExampleSheet(
+              visibilityType: selectedVisibilityType,
+            ),
+          ),
         ),
       ),
     );

diff --git a/example/lib/tutorial/cupertino_modal_sheet.dart b/example/lib/tutorial/cupertino_modal_sheet.dart
@@ -55,10 +55,12 @@ void _showModalSheet(BuildContext context, {required bool isFullScreen}) {
       minFlingVelocityRatio: 2.0,
       minDragDistance: 300.0,
     ),
-    builder: (context) => switch (isFullScreen) {
-      true => const _FullScreenSheet(),
-      false => const _HalfScreenSheet(),
-    },
+    builder: (context) => SheetViewport(
+      child: switch (isFullScreen) {
+        true => const _FullScreenSheet(),
+        false => const _HalfScreenSheet(),
+      },
+    ),
   );
 
   Navigator.push(context, modalRoute);

diff --git a/example/lib/tutorial/declarative_navigation_sheet.dart b/example/lib/tutorial/declarative_navigation_sheet.dart
@@ -131,7 +131,11 @@ class _ExampleHome extends StatelessWidget {
     return Stack(
       children: [
         const Scaffold(),
-        _ExampleSheet(nestedNavigator: nestedNavigator),
+        SheetViewport(
+          child: _ExampleSheet(
+            nestedNavigator: nestedNavigator,
+          ),
+        ),
       ],
     );
   }

diff --git a/example/lib/tutorial/draggable_sheet.dart b/example/lib/tutorial/draggable_sheet.dart
@@ -16,7 +16,9 @@ class _BasicDraggableSheetExample extends StatelessWidget {
       home: Stack(
         children: [
           Scaffold(),
-          _MySheet(),
+          SheetViewport(
+            child: _MySheet(),
+          ),
         ],
       ),
     );
@@ -61,6 +63,7 @@ class _MySheet extends StatelessWidget {
   }
 }
 
+/* cSpell: disable */
 const _loremIpsum = '''
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor id turpis vel pulvinar. 
 Etiam rhoncus mollis mollis. Nam fringilla justo quis nulla scelerisque, sed consectetur libero
@@ -72,3 +75,4 @@ Cras sit amet cursus urna. Nullam tincidunt ullamcorper elementum. Ut hendrerit
 in iaculis felis blandit. Cras malesuada lorem augue, et porttitor sem aliquet et. Aliquam 
 nec diam nisl. 
 ''';
+/* cSpell: enable */
diff --git a/example/lib/tutorial/extent_driven_animation.dart b/example/lib/tutorial/extent_driven_animation.dart
@@ -33,7 +33,9 @@ class _ExampleScaffold extends StatelessWidget {
         body: Stack(
           children: [
             _RotatedFlutterLogo(),
-            _ExampleSheet(),
+            SheetViewport(
+              child: _ExampleSheet(),
+            ),
           ],
         ),
         bottomNavigationBar: _BottomAppBar(),

diff --git a/example/lib/tutorial/imperative_navigation_sheet.dart b/example/lib/tutorial/imperative_navigation_sheet.dart
@@ -14,7 +14,9 @@ class _ImperativeNavigationSheetExample extends StatelessWidget {
       home: Stack(
         children: [
           Scaffold(),
-          _ExampleSheet(),
+          SheetViewport(
+            child: _ExampleSheet(),
+          ),
         ],
       ),
     );

diff --git a/example/lib/tutorial/ios_style_declarative_modal_navigation_sheet.dart b/example/lib/tutorial/ios_style_declarative_modal_navigation_sheet.dart
@@ -79,13 +79,15 @@ class _Modal extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return NavigationSheet(
-      transitionObserver: transitionObserver,
-      child: Material(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(20),
-        clipBehavior: Clip.antiAlias,
-        child: nestedNavigator,
+    return SheetViewport(
+      child: NavigationSheet(
+        transitionObserver: transitionObserver,
+        child: Material(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          clipBehavior: Clip.antiAlias,
+          child: nestedNavigator,
+        ),
       ),
     );
   }

diff --git a/example/lib/tutorial/keyboard_dismiss_behavior.dart b/example/lib/tutorial/keyboard_dismiss_behavior.dart
@@ -133,9 +133,14 @@ class _ExampleHomeState extends State<_ExampleHome> {
       context,
       ModalSheetRoute(
         swipeDismissible: true, // Enable the swipe-to-dismiss behavior.
-        builder: (context) => _ExampleSheet(
-          isFullScreen: isFullScreen,
-          keyboardDismissBehavior: keyboardDismissBehavior,
+        builder: (context) => SafeArea(
+          bottom: false,
+          child: SheetViewport(
+            child: _ExampleSheet(
+              isFullScreen: isFullScreen,
+              keyboardDismissBehavior: keyboardDismissBehavior,
+            ),
+          ),
         ),
       ),
     );
@@ -166,29 +171,26 @@ class _ExampleSheet extends StatelessWidget {
       body = SizedBox.expand(child: body);
     }
 
-    return SafeArea(
-      bottom: false,
-      child: SheetKeyboardDismissible(
-        dismissBehavior: keyboardDismissBehavior,
-        child: ScrollableSheet(
-          child: SheetContentScaffold(
-            appBar: AppBar(),
-            body: body,
-            bottomBar: StickyBottomBarVisibility(
-              child: BottomAppBar(
-                child: Row(
-                  children: [
-                    IconButton(
-                      onPressed: () {},
-                      icon: const Icon(Icons.menu),
-                    ),
-                    const Spacer(),
-                    IconButton(
-                      onPressed: () {},
-                      icon: const Icon(Icons.more_vert),
-                    ),
-                  ],
-                ),
+    return SheetKeyboardDismissible(
+      dismissBehavior: keyboardDismissBehavior,
+      child: ScrollableSheet(
+        child: SheetContentScaffold(
+          appBar: AppBar(),
+          body: body,
+          bottomBar: StickyBottomBarVisibility(
+            child: BottomAppBar(
+              child: Row(
+                children: [
+                  IconButton(
+                    onPressed: () {},
+                    icon: const Icon(Icons.menu),
+                  ),
+                  const Spacer(),
+                  IconButton(
+                    onPressed: () {},
+                    icon: const Icon(Icons.more_vert),
+                  ),
+                ],
               ),
             ),
           ),

diff --git a/example/lib/tutorial/navigation_sheet_and_keyboard.dart b/example/lib/tutorial/navigation_sheet_and_keyboard.dart
@@ -18,9 +18,11 @@ final _router = GoRouter(
           observers: [_transitionObserver],
           pageBuilder: (context, state, child) {
             return ModalSheetPage(
-              child: _MySheet(
-                transitionObserver: _transitionObserver,
-                navigator: child,
+              child: SheetViewport(
+                child: _MySheet(
+                  transitionObserver: _transitionObserver,
+                  navigator: child,
+                ),
               ),
             );
           },

diff --git a/example/lib/tutorial/scrollable_pageview_sheet.dart b/example/lib/tutorial/scrollable_pageview_sheet.dart
@@ -20,7 +20,11 @@ class _ScrollablePageViewSheetExample extends StatelessWidget {
                 onPressed: () {
                   Navigator.push(
                     context,
-                    ModalSheetRoute(builder: (_) => const _MySheet()),
+                    ModalSheetRoute(
+                      builder: (_) => const SheetViewport(
+                        child: _MySheet(),
+                      ),
+                    ),
                   );
                 },
                 child: const Text('Show Sheet'),

diff --git a/example/lib/tutorial/scrollable_sheet.dart b/example/lib/tutorial/scrollable_sheet.dart
@@ -16,7 +16,12 @@ class _BasicScrollableSheetExample extends StatelessWidget {
       home: Stack(
         children: [
           Scaffold(),
-          _MySheet(),
+          SafeArea(
+            bottom: false,
+            child: SheetViewport(
+              child: _MySheet(),
+            ),
+          ),
         ],
       ),
     );
@@ -59,7 +64,7 @@ class _MySheet extends StatelessWidget {
       // ),
     );
 
-    return SafeArea(bottom: false, child: sheet);
+    return sheet;
   }
 
   Widget buildSheetBackground(BuildContext context, Widget content) {

diff --git a/example/lib/tutorial/sheet_content_scaffold.dart b/example/lib/tutorial/sheet_content_scaffold.dart
@@ -14,7 +14,9 @@ class _SheetContentScaffoldExample extends StatelessWidget {
       home: Stack(
         children: [
           Scaffold(),
-          _ExampleSheet(),
+          SheetViewport(
+            child: _ExampleSheet(),
+          ),
         ],
       ),
     );

diff --git a/example/lib/tutorial/sheet_controller.dart b/example/lib/tutorial/sheet_controller.dart
@@ -59,8 +59,10 @@ class _ExampleHomeState extends State<_ExampleHome> {
               ),
             ),
           ),
-          _ExampleSheet(
-            controller: controller,
+          SheetViewport(
+            child: _ExampleSheet(
+              controller: controller,
+            ),
           ),
         ],
       ),

diff --git a/example/lib/tutorial/sheet_draggable.dart b/example/lib/tutorial/sheet_draggable.dart
@@ -15,7 +15,9 @@ class _SheetDraggableExample extends StatelessWidget {
         body: Stack(
           children: [
             Placeholder(),
-            _ExampleSheet(),
+            SheetViewport(
+              child: _ExampleSheet(),
+            ),
           ],
         ),
       ),

diff --git a/example/lib/tutorial/sheet_physics.dart b/example/lib/tutorial/sheet_physics.dart
@@ -43,7 +43,11 @@ class _ExampleHomeState extends State<_ExampleHome> {
       body: Stack(
         children: [
           buildOptions(),
-          _MySheet(physicsKind: selectedPhysics),
+          SheetViewport(
+            child: _MySheet(
+              physicsKind: selectedPhysics,
+            ),
+          ),
         ],
       ),
     );