Skip to content

Slivers not being clipped in CustomScrollView with SliverMainAxisGroup on Flutter 3.13 #132788

@slightfoot

Description

@slightfoot

Is there an existing issue for this?

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions