Repository navigation
Slivers not being clipped in CustomScrollView with SliverMainAxisGroup on Flutter 3.13 #132788
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
Run the code sample below you and you will see that the list items are not clipped by the CustomScrollView when using SliverMainAxisGroup. The attached video show this in action.
Wrapping the CustomScrollView in a ClipRect is a workaround at present but adds an extra ClipRectLayer. Removing the SliverMainAxisGroup widget makes the problem also go away. This explains that the issue relates to the new SliverMainAxisGroup widget and CustomScrollView.
Expected results
The CustomScrollView should adhere to it's clipBehavior and clip its content.
Actual results
The CustomScrollView should be clipping its content.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Material(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 128.0),
child: DecoratedBox(
position: DecorationPosition.foreground,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 3.0),
),
child: CustomScrollView(
clipBehavior: Clip.hardEdge, // default value
slivers: [
SliverMainAxisGroup(
slivers: [
const SliverToBoxAdapter(
child: Material(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: Text('Heading'),
),
),
),
SliverList.builder(
itemBuilder: (BuildContext context, int index) {
return Material(
child: ListTile(
title: Text('Item #$index'),
),
);
},
),
],
),
],
),
),
),
),
),
);
}Screenshots or Video
Screenshots / Video demonstration
output.mp4
Logs
No response
Flutter Doctor output
Doctor output
# flutter doctor -v
[√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.19045.3324], locale en-GB)
• Flutter version 3.13.0 on channel stable at C:\Android\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision efbf63d9c6 (2 days ago), 2023-08-15 21:05:06 -0500
• Engine revision 1ac611c64e
• Dart version 3.1.0
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at C:\Android\SDK
• Platform android-33, build-tools 33.0.0
• ANDROID_SDK_ROOT = C:\Android\SDK
• Java binary at: C:\Program Files\Java\jdk-17\bin\java
• Java version Java(TM) SE Runtime Environment (build 17.0.7+8-LTS-224)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.18)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.32802.440
• Windows 10 SDK version 10.0.19041.0
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
[√] IntelliJ IDEA Ultimate Edition (version 2023.2)
• IntelliJ at C:\Users\Simon\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\232.8660.185
• Flutter plugin version 75.1.4
• Dart plugin version 232.8660.129
[√] VS Code, 64-bit edition (version 1.27.2)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 2.18.0
[√] Connected device (4 available)
• Pixel 4 (mobile) • 99171FFAZ000F8 • android-arm64 • Android 13 (API 33)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.3324]
• Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.171
• Edge (web) • edge • web-javascript • Microsoft Edge 115.0.1901.203
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
Activity
slightfoot commentedon Aug 17, 2023
@Piinks @thkim1011 pulling you in as you are code owners for this.
TahaTesser commentedon Aug 18, 2023
Great catch @slightfoot. I can see on the latest master too.
flutter doctor -v
slightfoot commentedon Aug 21, 2023
🥳 Thanks @Piinks!
Fix visual overflow for SliverMainAxisGroup (#132989)
Fix visual overflow for SliverMainAxisGroup (flutter#132989)
[CP] Fix visual overflow for SliverMainAxisGroup (#132989) (#133057)
github-actions commentedon Sep 11, 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.