DecoratedSliver could benefit from example that turns off clip behavior on parent scrollview #156819
Description
Steps to reproduce
- flutter create bug
- Paste the code sample
- flutter run -d chrome
- Make the window bigger and smaller, so that the scrollbar appears/disappears on the sliver
- When the scrollbar is shown, the decoration is clipped on all sides, which makes the shadows disappear in the sample.
- In case the effect is hard to see, changing the shadow color to something easy to see, like
Colors.redmakes the effect way more apparent.
Expected results
I expect the visible parts of the decoration to be painted, regardless of whether the sliver is currently scrollable.
I.e. like how a nine-patch rect draws its corners and the sides between the corners can be infinitely long.
Actual results
The decoration is only properly painted when the sliver fits entirely on the screen.
If I set Clip.none for the CustomScrollView, it seems to be fixed. I would expect the clip to only happen on the trailing edge of the scroll axis, so that the visible decoration is not clipped when the scrollbar is shown.
In this sample, that would be clipping the bottom and not the top/left/right of the decoration.
However, the docs tell you that the child isn't clipped, despite there is some clipping going on, which feels misleading?
flutter/packages/flutter/lib/src/widgets/decorated_sliver.dart
Lines 28 to 29 in 2b36701
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CustomScrollView(
slivers: [
DecoratedSliver(
decoration: const ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
),
shadows: <BoxShadow>[
BoxShadow(
color: Color(0x1A79858C),
offset: Offset(3, 3),
blurRadius: 24,
),
],
),
sliver: SliverList.builder(
itemCount: 10,
itemBuilder: (_, int index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
const Icon(Icons.abc),
Flexible(child: Text('Item $index')),
],
),
),
),
),
],
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Screen.Recording.2024-10-15.at.15.52.03.mov
Logs
Logs
navaronbracke@MacBook-Pro-van-Navaron decorated_sliver_bug % flutter run -d chrome
Resolving dependencies...
Downloading packages...
> collection 1.19.0 (was 1.18.0)
flutter_lints 4.0.0 (5.0.0 available)
> leak_tracker 10.0.7 (was 10.0.5)
> leak_tracker_flutter_testing 3.0.8 (was 3.0.5)
lints 4.0.0 (5.1.0 available)
material_color_utilities 0.11.1 (0.12.0 available)
meta 1.15.0 (1.16.0 available)
< sky_engine 0.0.0 from sdk flutter (was 0.0.99 from sdk flutter)
> stack_trace 1.12.0 (was 1.11.1)
> string_scanner 1.3.0 (was 1.2.0)
> test_api 0.7.3 (was 0.7.2)
> vm_service 14.3.0 (was 14.2.5)
Changed 8 dependencies!
4 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 16.2s
This app is linked to the debug service: ws://127.0.0.1:57227/tiIHHuiVJps=/ws
Debug service listening on ws://127.0.0.1:57227/tiIHHuiVJps=/ws
🔥 To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
A Dart VM Service on Chrome is available at: http://127.0.0.1:57227/tiIHHuiVJps=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:57227/tiIHHuiVJps=
Performing hot restart... 162ms
Restarted application in 164ms.Flutter Doctor output
Doctor output
[✓] Flutter (Channel master, 3.27.0-1.0.pre.50, on macOS 14.6.1 23G93 darwin-x64, locale en-BE)
• Flutter version 3.27.0-1.0.pre.50 on channel master at /Users/navaronbracke/Documents/flutter
• Upstream repository [email protected]:navaronbracke/flutter.git
• FLUTTER_GIT_URL = [email protected]:navaronbracke/flutter.git
• Framework revision 2b36701456 (77 minutes ago), 2024-10-15 08:42:42 -0400
• Engine revision 107ea8baa4
• Dart version 3.6.0 (build 3.6.0-334.2.beta)
• DevTools version 2.40.1
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/navaronbracke/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/navaronbracke/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.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 17.0.11+0-17.0.11b1207.24-11852314)
[✓] VS Code (version 1.94.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.98.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 14.6.1 23G93 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.91
[✓] Network resources
• All expected network resources are available.
• No issues found!