Repository navigation
DraggableScrollableSheet which is called by showModalBottomSheet and contains Slivers doesn't work correctly #116427
Description
Steps to Reproduce
- Paste the code from the sample below under MaterialApp's home property
- Run the app and press the bugs button
- A draggable scrollable sheet will appear.
Actual results:
- If you begin dragging the sheet fast enough and immediately release the finger, it will snap to the top and won't scroll the ListView further (but it definitely should though). However, it works fine if you keep holding the finger. Same thing applies when you scroll in opposite direction.
2022-12-02.19.38.56.mov
-
showModalBottomSheet's useSafeArea property should have only top set to true but in our case it pads from both sides for some reason...
-
Sometimes, when you want to dismiss the bottom scrollable sheet by dragging, it will stick to the bottom instead of disappearing, even though there are only 2 snap sizes specified (0.8 and 1.0):
2022-12-02.19.41.44.mov
- If you open the sheet, it can't be dismissed by dragging it down until you drag it up first (when both minChildSize and snapSizes are provided:
2022-12-02.19.45.04.mov
- Why dismiss threshold is missing in this widget? It should be present.
Expected results:
- Proper scrolling behavior which should be synced. Here is the example:
RPReplay_Final1669999675.2.mov
- There should be an exposed option to disable bottom padding when using useSafeArea.
- (and also 5) How can I achieve proper dismiss behavior? Also, the dismiss threshold should be implemented, e.g. if you didn't scroll the sheet down enough, it should snap back to the initial snap point using proper physics simulation.
- Is it intended that I can't dismiss the bottomsheet when both properties are applied?
Code sample
import 'package:flutter/material.dart';
class TestScreen extends StatelessWidget {
const TestScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
enableDrag: true,
useSafeArea: true,
clipBehavior: Clip.hardEdge,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
context: context,
isScrollControlled: true,
builder: (context) {
return DraggableScrollableSheet(
expand: false,
initialChildSize: 0.8,
snap: true,
snapSizes: const [0.8, 1.0],
builder: (context, scrollController) {
return CustomScrollView(
controller: scrollController,
physics: const ClampingScrollPhysics(),
slivers: [
SliverPersistentHeader(
delegate: TestSliverAppBar(),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => ListTile(
title: Text("Index: $index"),
),
childCount: 50,
),
)
],
);
},
);
},
);
},
child: const Text(
'bugs',
),
),
),
);
}
}
class TestSliverAppBar extends SliverPersistentHeaderDelegate {
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.pink,
);
}
@override
double get maxExtent => 100;
@override
double get minExtent => 50;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
true;
}
Logs
[!] Flutter (Channel master, 3.6.0-14.0.pre.2, on macOS 12.6 21G115 darwin-arm64, locale ru-RU)
• Flutter version 3.6.0-14.0.pre.2 on channel master at /Users/gidrokolbaska/Developer/flutter
! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.16.0/libexec/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/gidrokolbaska/Developer/flutter. Consider adding
/Users/gidrokolbaska/Developer/flutter/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 7572ce907f (35 hours ago), 2022-12-01 01:07:29 -0500
• Engine revision 51356bf895
• Dart version 2.19.0 (build 2.19.0-444.0.dev)
• DevTools version 2.20.0
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to
perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at /Users/gidrokolbaska/Library/Android/sdk
• Platform android-32, build-tools 32.1.0-rc1
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14A400
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
[✓] VS Code (version 1.73.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.34.0
[✓] Connected device (3 available)
• iPhone 12 (mobile) • 070B14C3-C297-4A54-A136-A502B61105DF • ios •
com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.71
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
Activity
darshankawar commentedon Dec 5, 2022
Thanks for the report @gidrokolbaska
I tried your code sample and observed mixed response. The scroll you mentioned in point 1 seem to be working fine, but was able to see point 3 sometimes, ie, it getting stuck at the bottom.
116427.mov
Can you also confirm the same behavior on latest master / stable ?
gidrokolbaska commentedon Dec 7, 2022
@darshankawar Hi!
Yes, the behavior is absolutely the same on the latest master. Can't use stable because showModalbottomSheet doesn't have useSafeArea yet on this branch
gidrokolbaska commentedon Dec 7, 2022
Your video also indicates issue №1 at 0:19. I see that you had to scroll twice :) To reproduce it, all you have to do is to touch the screen and swipe it up and immediately release the finger. The bottomsheet will expand to top, but the inner listview won't scroll no matter how fast you've swiped, unless you keep holding the finger for a little longer.
Here is the video (you can see the semi-transparent circle behind the cursor indicating how much do I hold the LMB):
2022-12-07.15.16.42.mov
darshankawar commentedon Dec 8, 2022
Thanks for the update. Based on my findings, adding applicable lables for team's attention.
master flutter doctor -v
darrenaustin commentedon Dec 9, 2022
@Piinks any idea what's going on here?
Piinks commentedon Dec 9, 2022
This should definitely be split out into individual issues. It is difficult to discuss/diagnose and resolve when one issue has several issues in it.
gidrokolbaska commentedon Dec 10, 2022
@Piinks Hi! So I basically have to create separate issues and mention the current one in them, right?
Piinks commentedon Dec 12, 2022
Hi! Yes, thank you! We ask that each issues is individual and actionable with a minimal snippet of code that reproduces the given issue. This helps keep issues focused and fixable, it can be hard to keep track of which one of several we are talking about, as you can see from the conversation above already. :)
You are welcome to ping me on the individual issues. Thanks!
https://github.com/flutter/flutter/wiki/Issue-hygiene
gidrokolbaska commentedon Dec 13, 2022
Understood. Closing this one then. Will create separate ones soon. Thanks for clarification :)
Piinks commentedon Dec 13, 2022
Thanks very much! I took a look at each and left some comments. :)
github-actions commentedon Mar 5, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.