I am trying to programmatically collapse or expand the SliverPresistantHeader with the reference from shrinkOffset
value. I have looked everywhere to find how to implement this feature, but I couldn't find any solution (so here I am asking).
Here my code for my custom SliverPresistantHeaderDelegate:
import 'package:bom/constants/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class BomAppHeader implements SliverPersistentHeaderDelegate {
BomAppHeader({
this.expandedHeight,
this.title,
this.body,
@required this.notificationShade,
});
final double notificationShade;
final double expandedHeight;
final Widget title;
final Widget body;
@override
double get maxExtent {
if (expandedHeight == null || expandedHeight < kToolbarHeight) {
return minExtent;
} else {
return notificationShade + expandedHeight;
}
}
@override
double get minExtent {
return title == null
? notificationShade
: notificationShade + kToolbarHeight;
}
double bodyOpacity(double shrinkOffset) {
return max(0.0, 1 - (shrinkOffset / (maxExtent - minExtent)));
}
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
// print(max(0.0, 1 - (shrinkOffset / (maxExtent - minExtent))));
return Stack(
fit: StackFit.expand,
children: [
Container(
decoration: kAppBarDecoration,
),
Opacity(
opacity: bodyOpacity(shrinkOffset),
child: Container(
height: maxExtent > minExtent ? double.infinity : 0.0,
margin: title == null
? EdgeInsets.only(top: notificationShade + 2)
: EdgeInsets.only(
top: notificationShade, bottom: kToolbarHeight),
padding: EdgeInsets.all(8.0),
child: body,
),
),
Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
SizedBox(
height: notificationShade,
),
Container(
height: title == null ? 0.0 : kToolbarHeight,
padding: EdgeInsets.all(5.0),
child: title,
),
]),
],
);
}
double titleOpacity(double shrinkOffset) {
// simple formula: fade out text as soon as shrinkOffset > 0
return 1.0 - max(0.0, shrinkOffset) / maxExtent;
// more complex formula: starts fading out text when shrinkOffset > minExtent
//return 1.0 - max(0.0, (shrinkOffset - minExtent)) / (maxExtent - minExtent);
}
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
@override
// TODO: implement showOnScreenConfiguration
PersistentHeaderShowOnScreenConfiguration get showOnScreenConfiguration =>
null;
@override
// TODO: implement snapConfiguration
FloatingHeaderSnapConfiguration get snapConfiguration => null;
@override
// TODO: implement stretchConfiguration
OverScrollHeaderStretchConfiguration get stretchConfiguration => null;
@override
// TODO: implement vsync
TickerProvider get vsync => null;
}
So far I didn't find any solution for implementing this, still surfing the web.
As flutter is open-source and we have access to their built-in codes (I recently look into each widget code deeply to learn how each thing works ;-)), I found the
snap
functionality is the one I am looking for from the flutter documentation. So I looked intoSliverAppBar
and how snap implemented in it. Just copied out the things I needed and all works as expected now.[if anyone need my code, ask me out. I suppose nobody interested or looked into this question, lol, better say, mine was a dump question]