How to programmatically Collapse or Expand SliverPresistentHeader [custom floating app bar]

Question

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.

Answer 1

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 into SliverAppBar 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]

Answer 2

Add a scroll controller to your 'Custom Scroll View'

ScrollController _scrollController;

Widget build(BuildContext context) {
_scrollController = ScrollController();
return Scaffold(
body: CustomScrollView( shrinkWrap: true, controller: _scrollController,
physics: BouncingScrollPhysics(),
slivers: <Widget>[
SliverAppBar(
pinned: false,
:
:
:
onPressed: () {// Scroll to top when on click => Expand 
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration:Duration(milliseconds:1300),
curve: Curves.decelerate,);
 },

onPressed: () {// Scroll to bottom when on click => Collapse
scrollController.animateTo(
    scrollController.position.maxScrollExtent,
    duration: Duration(milliseconds: 1300),
    curve: Curves.decelerate,
  );
 },