[CP] SliverMainAxisGroup overflow fix #133058
Description
Issue Link
Commit Hash
Target
stable
PR Link
Changelog Description
This fixes a visual overflow caused by SliverMainAxisGroup due to the clip behavior of the viewport not being applied in some cases.
Impacted Users
Everyone using SliverMainAxisGroup
Impact Description
output.mp4
This issue caused the content of the ScrollView to overflow outside of the bounds of the viewport.
Workaround
Yes, placing a clip around the CustomScrollView is a workaround.
Risk
low
Test Coverage
yes
Validation Steps
- Run this code
- Observe no overflowing content outside of the blue border.
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'),
),
);
},
),
],
),
],
),
),
),
),
),
);
}