Developed with 💚 by netglade

A truly customizable sliver for app bars with the benefit of using builders. Check the storybook demo and play with it yourself.

SliverAppBarBuilder supports various configurations:

• bar
  • height
  • initialHeight (when expanded)
  • background (for everything or bar only)
• content
  • builder
  • initialHeight
  • toggle contentBelowBar (whether content is on top or below bar)
  • padding
• leading and trailing actions
  • list of builders
  • toggle collapsing
  • padding
• stretching
  • toggle stretch
  • stretchConfiguration
• misc
  • pinned mode
  • toggle mode
  • toggle debug (so you can debug each part visually)

Getting Started

Using the package is simple. Just use the sliver SliverAppBarBuilder in place of SliverAppBar, configure all the properties, and enjoy.

Each builder, for content or leading/trailing actions, provides expand ratio and content/bar height, so you can easily use these values to customize your headers.

• expandRatio is a value between 1.0 when expanded and 0.0 when shrunken
• contentHeight/barHeight are current heights of corresponding parts

Content builder has additional property:

• centerPadding, when contentBelowBar is false, is a value used to offset content to center it with bar

An example of a header with title moving from under back button to its right might look like this:

CustomScrollView(
  slivers: [
    SliverAppBarBuilder(
      barHeight: 60,
      pinned: true,
      leadingActions: [
        (context, expandRatio, barHeight, overlapsContent) {
          return SizedBox(
            height: barHeight,
            child: const BackButton(),
          );
        }
      ],
      initialContentHeight: 150,
      contentBuilder: (context, expandRatio, contentHeight, overlapsContent) {
        return Container(
          alignment: Alignment.centerLeft,
          height: 60,
          transform: Matrix4.translationValues(10 + (1 - expandRatio) * 40, 0, 0),
          child: Text(
            'My Title',
            style: TextStyle(
              fontSize: 22 + expandRatio * 10,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      },
    ),
  ],
);