The SliverAppBar control expands and collapses the page header.

For more details about SliverAppBar use, see Yechaoa/Flutter_SliverAppBar

SliverAppBar linkage effect control is still relatively weak. In real product development, linkage requirements are very strange.

Such as

  • Changes status bar text color when scrolling to a certain height

  • Implement background gradient while scrolling:

  • The position of an element moves and so on

To deeply customize linkage effects, Flutter provides you with SliverPersistentHeader.

SliverPersistentHeader

Creates a sliver that varies its size when it is scrolled to the start of a viewport.

SliverAppBar dynamics are also implemented based on SliverPersistentHeader.

The lower you go, the more ways you can manipulate it

SliverPersistentHeader properties

  • Delegate: SliverPersistentHeaderDelegate
  • Is it visible when pinned to the minimum height
    • True: SliverPersistentHeader is fixed to the head at fold height
    • False: Zoom to the folded height and slide out of the page
  • Whether to float first while sliding

See the SliverPersistentHeader guide for details on how to configure these parameters

SliverPersistentHeaderDelegate

Use SliverPersistentHeaderDelegate SliverPersistentHeader core is, we need to subclass, is also very easy to:


class PersistentHeaderBuilder extends SliverPersistentHeaderDelegate {
  final double max;
  final double min;
  final Widget Function(BuildContext context, double offset, bool overlapsContent) builder;

  PersistentHeaderBuilder(
      {this.max = 120.this.min = 80.required this.builder})
      : assert(max >= min && builder ! =null);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return builder(context, shrinkOffset, overlapsContent);
  }

  @override
  double get maxExtent => max;

  @override
  double get minExtent => min;

  @override
  bool shouldRebuild(covariantPersistentHeaderBuilder oldDelegate) => max ! = oldDelegate.max || min ! = oldDelegate.min || builder ! = oldDelegate.builder; }Copy the code

To pass everything in from the outside, a very simple implementation of a general delegete.

Use the custom Persistenthe Builder

// ...
@override
Widget build(BuildContext context) {
    // Status bar height
    final navh = style.size.navBarHeight + style.size.statusBarHeight;
    return SliverPersistentHeader(
        pinned: true,
        floating: false,
        delegate: PersistentHeaderBuilder(
        min: navh,
        max: maxh,
        builder: (context, offset, overlapsContent) {
            returnAnnotatedRegion<SystemUiOverlayStyle>( value: offset > navh ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light, child: _buildContent(context, offset, overlapsContent), ); },),); } Widget _buildContent(BuildContext context,double offset, bool overlapsContent) {
    // With offset you can do any action
}
Copy the code

It’s also very simple to use, and you can set up whatever you want. In our example, we change the color of the status bar when the scrolling offset exceeds the height of the navigation bar. Since we got the offset, we can do any linkage effect according to the offset.

conclusion

SliverPersistentHeader provides good control over the linkage effect because offsets can be obtained from the delegate. The SliverAppBar already implements offset-related dynamic effects internally, giving more padding to the outside.

SliverPersistentHeader is not required to achieve similar complex linkage animations. A similar effect can be achieved by listening in principle to offset scrolling. So it’s possible to listen for the Scrollview’s scroll events (without going into the underlying code, I don’t know).

Background gradient effect implementation: Miroslava – Podybailo/Flutter_sliver_header_delegate

To read more, please follow the wechat official account OldBirds