How to change pinned of Sliver Persistent Header - flutter

Question

I am using 2 Sliver Headers above GridView and a ListView on a CustomScrollView . I want only 1 of the headers (the one I am scrolling over) to be pinned When I scroll down. I want to be able to scroll down and only one of the headers is pinned when I pass over Gridview.
EDIT:
Added _SliverAppBarDelegate
Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 2,
child: CustomScrollView(
slivers: [
makeHeader('Categories', false),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
margin: EdgeInsets.all(5.0),
color: Colors.blue,
),
childCount: 10),
),
makeHeader('Watchlist', false),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
margin: EdgeInsets.all(5.0),
color: Colors.red,
),
childCount: 10),
),
],
),
),
),
)
SliverPersistentHeader makeHeader(String headerText, bool pinned) {
return SliverPersistentHeader(
pinned: pinned,
floating: true,
delegate: _SliverAppBarDelegate(
minHeight: 40.0,
maxHeight: 60.0,
child: Container(
child: Text(
headerText,
style: TextStyle(fontSize: 24, color: Colors.green,fontWeight: FontWeight.bold),
)),
),
);
}
///////////////////////////EDIT
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
#required this.minHeight,
#required this.maxHeight,
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 new SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}

Answer 1

This is an old question but I'm putting my solution here in case anyone else needs the sticky header effect without a plugin.
My solution is to have the sliver headers' minExtent value in a map where the key is the number of sliverList items above the header.
final _headersMinExtent = <int, double>{};
We can then reduce the minExtent when the header needs to be pushed out of the view. To accomplish that we listen to the scrollController. Note that we could also update the pinned status but we wouldn't get a transition.
We calculate the minExtent from :
The number of items above the header : key.
The number of headers already pushed out the view : n.
_scrollListener() {
var n = 0;
setState(() {
_headersMinExtent.forEach((key, value) {
_headersMinExtent[key] = (key * 30 + n * 40 + 190 - _scrollController.offset).clamp(0, 40);
n++;
});
});
}
When we construct our widget list we have to pass the minExtent parameter to the SliverPersistentHeaderDelegate :
List<Widget> _constructList() {
var widgetList = <Widget>[];
for (var i = 0; i < itemList.length; i++) {
// We want a header every 5th item
if (i % 5 == 0) {
// Don't forget to init the minExtent value.
_headersMinExtent[i] = _headersMinExtent[i] ?? 40;
// We pass the minExtent as a parameter.
widgetList.add(SliverPersistentHeader(pinned: true, delegate: HeaderDelegate(_headersMinExtent[i]!)));
}
widgetList.add(SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
decoration: BoxDecoration(color: Colors.yellow, border: Border.all(width: 0.5)),
height: 30,
),
childCount: 1,
)));
}
return widgetList;
}
This is the result :
Full application code :
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _scrollController = ScrollController();
final _headersMinExtent = <int, double>{};
final itemList = List.filled(40, "item");
#override
void initState() {
super.initState();
_scrollController.addListener(() {
_scrollListener();
});
}
_scrollListener() {
var n = 0;
setState(() {
_headersMinExtent.forEach((key, value) {
_headersMinExtent[key] = (key * 30 + n * 40 + 190 - _scrollController.offset).clamp(0, 40);
n++;
});
});
}
List<Widget> _constructList() {
var widgetList = <Widget>[];
for (var i = 0; i < itemList.length; i++) {
// We want a header every 5th item
if (i % 5 == 0) {
// Don't forget to init the minExtent value.
_headersMinExtent[i] = _headersMinExtent[i] ?? 40;
// We pass the minExtent as a parameter.
widgetList.add(SliverPersistentHeader(pinned: true, delegate: HeaderDelegate(_headersMinExtent[i]!)));
}
widgetList.add(SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
decoration: BoxDecoration(color: Colors.yellow, border: Border.all(width: 0.5)),
height: 30,
),
childCount: 1,
)));
}
return widgetList;
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
body: CustomScrollView(
controller: _scrollController,
slivers: _constructList(),
),
),
);
}
}
class HeaderDelegate extends SliverPersistentHeaderDelegate {
final double _minExtent;
HeaderDelegate(this._minExtent);
#override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
decoration: BoxDecoration(color: Colors.green, border: Border.all(width: 0.5)),
);
}
#override
double get minExtent => _minExtent;
#override
double get maxExtent => 40;
#override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}
class ListChildDelegate extends SliverChildDelegate {
#override
Widget? build(BuildContext context, int index) {
// TODO: implement build
throw UnimplementedError();
}
#override
bool shouldRebuild(covariant SliverChildDelegate oldDelegate) => true;
}

Answer 2

#diegoveloper I found this plugin. https://pub.dev/packages/flutter_sticky_header
I wish there is still an easier way to do it without a plugin. However, this plugin exactly solves the issue I am describing.