SliverPersistentHeaderDelegate.build overlapsContent does not work reliably #26667
Labels
customer: flex
f: scrolling
Viewports, list views, slivers, etc.
found in release: 1.21
Found to occur in 1.21
found in release: 2.10
Found to occur in 2.10
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
team-framework
Owned by Framework team
triaged-framework
Triaged by Framework team
Comments
|
To make it easier to reproduce, here's the complete example: code sampleimport 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Collapsing List Demo')),
body: CollapsingList(),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
required this.minHeight,
required this.maxHeight,
required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent,
) {
return SizedBox.expand(
child: Container(
color: overlapsContent ? Colors.red : Colors.lightBlue,
child: child,
),
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
class CollapsingList extends StatelessWidget {
SliverPersistentHeader makeHeader(String headerText) {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 60,
maxHeight: 200,
child: Center(child: Text(headerText)),
),
);
}
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
makeHeader('Header Section 1'),
SliverGrid.count(
crossAxisCount: 3,
children: [
Container(color: Colors.red, height: 150.0),
Container(color: Colors.purple, height: 150.0),
Container(color: Colors.green, height: 150.0),
Container(color: Colors.orange, height: 150.0),
Container(color: Colors.yellow, height: 150.0),
Container(color: Colors.pink, height: 150.0),
Container(color: Colors.cyan, height: 150.0),
Container(color: Colors.indigo, height: 150.0),
Container(color: Colors.blue, height: 150.0),
],
),
makeHeader('Header Section 2'),
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
Container(color: Colors.red),
Container(color: Colors.purple),
Container(color: Colors.green),
Container(color: Colors.orange),
Container(color: Colors.yellow),
],
),
),
makeHeader('Header Section 3'),
SliverGrid(
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
makeHeader('Header Section 4'),
// Yes, this could also be a SliverFixedExtentList. Writing
// this way just for an example of SliverList construction.
SliverList(
delegate: SliverChildListDelegate(
[
Container(color: Colors.pink, height: 150.0),
Container(color: Colors.cyan, height: 150.0),
Container(color: Colors.indigo, height: 150.0),
Container(color: Colors.blue, height: 150.0),
],
),
),
],
);
}
} |
|
|
zoechi
added
framework
|
Just thought I'd loop back here. I still believe this is an issue, and we continue to have to work around this. Has anyone had a chance to look into this? |
|
Reproduced with Edit: flutter doctor -v |
VladyslavBondarenko
added
the
has reproducible steps
|
Same issue with flutter 1.17.1 |
|
overlapsContent works only when In general case: |
|
@Hixie I think you need to close this bug. |
|
Reproduces as of |
This was referenced May 30, 2023
flutter-triage-bot
bot
added
team-framework
2 tasks
flutter-triage-bot
bot
added
the
⏳
|
This issue is assigned to @Piinks but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
|
Thanks bot! This is part of a much larger refactor that is actively being explored. :) |
flutter-triage-bot
bot
removed
the
⏳
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm trying to add a border underneath of a sliver in a
CustomScrollViewonce that sliver is pinned to the top of the scroll container, so I created aSliverPersistentHeader, butoverlapsContentin mySliverPersistentHeaderDelegate.buildmethod is alwaysfalse.After doing some digging, I think this issue can be reliably reproduced on any
SliverPersistentHeaderthat is the FIRSTSliverPersistentHeaderin aCustomScrollView.For example, let's work with the collapsible scrolling list demonstrated at the end of this article: https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f#bde5. Let's modify the
_SliverAppBarDelegate.buildmethod as such:And let's update
makeHeaderas such:These changes should make it so when a header becomes pinned, its background turns from blue to red. If you actually test this out, this change works for all of the headers EXCEPT for the first one.
The text was updated successfully, but these errors were encountered: