Repository navigation
SliverFillRemaining(fillOverscroll: true) does not extend beyond the viewport size #141077
Description
Steps to reproduce
Create a widget that builds a CustomScrollView with bouncing scroll physics and a single child: a SliverFillRemaining with hasScrollBody: false and fillOverscroll: true.
Expected results
The constraints passed to the child of SliverFillRemaining are expanded when overscrolling so the child can fill the overscroll area.
For my use case I'd like to customize the background color of the overscroll area so it has the same background as SliverFillRemainings child, which is different from the Scaffold background color.
This is the same use case as mentioned in #44353.
@Piinks
From this comment I believe the intent was to support this use case:
I like your idea of being able to use this sliver for just customizing the overscroll area separate from the background, without an actual child to draw otherwise in the scroll view. I'll see if this is something I can adjust to make possible. :)
You can see how the child is only stretched to a maximum size of the viewport by uncommenting the SizedBox in the sample code. The first 100 px of overscroll will be covered by SliverFillRemaining, but after that you'll see the scaffold's background color.
I think this happens because RenderSliverFillRemainingAndOverscroll uses SliverConstraints.remainingPaintExtent for the max extent and remainingPaintExtent does not grow beyond the viewport extent even when there is significant overscroll. That seems unintuitive to me; because of overscroll remainingPaintExtent should be able to get bigger than the viewport extent, right?
Actual results
The child is not stretched to fill the overscroll area.
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(
home: Scaffold(
body: Center(
child: Container(
height: 500,
color: Colors.blue,
child: CustomScrollView(
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
slivers: [
//const SliverToBoxAdapter(
// child: ColoredBox(
// color: Colors.green,
// child: SizedBox(height: 100),
// ),
//),
SliverFillRemaining(
hasScrollBody: false,
fillOverscroll: true,
child: Container(color: Colors.red),
),
],
),
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Example with the SizedBox commented; we see the scaffold background color immediately when overscroll starts:
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-07.at.18.23.22.mp4
Example with the SizedBox uncommented; we see the scaffold background color after overscroll exceeds 100 px:
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-07.at.18.23.55.mp4
Logs
No response
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 14.1 23B2073 darwin-arm64, locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google
Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.85.1)
[✓] Connected device (2 available)
[✓] Network resources
! Doctor found issues in 2 categories.
Activity
Jjagg commentedon Jan 7, 2024
When you only want to add a background color and not stretch other parts of the box widget wrapped in
SliverFillRemainingyou can workaround this issue by instead adding an emptySliverFillRemainingwith the right background color. This makes theSliverFillRemainingsmaller so will avoid the issue as long as there is enough content in the slivers before the finalSliverFillRemaining. You would still run into this issue if the SliverFillRemaining would have to be larger than the viewport size to fill the overscroll area.I.e. instead of
use
Here's a reusable widget for it:
danagbemava-nc commentedon Jan 8, 2024
Reproducible using the sample provided in the initial post.
Labeling for further investigation
flutter doctor -v
SliverFillRemaining extends beyond viewport size when fillOverscroll …
github-actions commentedon Sep 3, 2026
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.