jamesblasco / modal_bottom_sheet

Flutter | Create advanced modal bottom sheets. Material, Cupertino or your own style
https://pub.dev/packages/modal_bottom_sheet
MIT License
1.86k stars 468 forks source link

Page height changes when sliding up in CupertinoSheetRoute #345

Open elliotkhd opened 1 year ago

elliotkhd commented 1 year ago

https://user-images.githubusercontent.com/26217279/233890321-4b79fab0-7c3c-465c-a658-cabb4005420c.mp4

When the CupertinoSheetRoute page is a Column with a child wrapped by a Expanded, the child will disappeared when sliding up because of this issue

martnst commented 11 months ago

I am also fancy this bug. I created a small reproducer.

🔗 https://github.com/martnst/modal_bottom_sheet_issue_345/

martnst commented 11 months ago

I spend some time looking at the framework's code, but could not yet figure out the root of the problem. For some reason, when scrolling beyond 100% (due to BouncingSheetPhysics) the height of the sheet's child gets doubled.

However, through my digging session, I came up with this workaround for our client side code: We need to limit the height of our content, e.g. using a ConstrainedBox.

Example:

class SomePage extends StatelessWidget {
  const SomePage({
    super.key,
  });

   @override
   Widget build(BuildContext context) {
     var colorScheme = Theme.of(context).colorScheme;
+    var appBar = AppBar(
+      backgroundColor: colorScheme.primary,
+      foregroundColor: colorScheme.onPrimary,
+      title: const Text("Some Paage"),
+    );
+
     return Scaffold(
-      appBar: AppBar(
-        backgroundColor: colorScheme.primary,
-        foregroundColor: colorScheme.onPrimary,
-        title: const Text("Some Page"),
-      ),
-      body: Placeholder(
-        color: colorScheme.primary,
+      appBar: appBar,
+      body: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxHeight: MediaQuery.of(context).size.height - appBar.preferredSize.height - 20,
+        ),
+        child: Placeholder(
+          color: colorScheme.primary,
+        ),
       ),
     );
   }
}

Sse also https://github.com/martnst/modal_bottom_sheet_issue_345/commit/0a7267751ff4f26c0d556347484e59a435eab6b4

martnst commented 11 months ago

In case this matters:

$ flutter --version
Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (4 months ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1