sliver_app_bar_builder

Description:

sliver app bar builder

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,
),
),
);
},
),
],
);
copied to clipboard