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, centerPadding, 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,
            ),
          ),
        );
      },
    ),
  ],
);

Development

Flutter is pinned with FVM in .fvmrc (currently 3.41.5):

fvm install
fvm flutter pub get

The repository uses Melos as a task runner (the published package lives in the repository root, so the root itself is the only Melos package). Melos is configured with sdkPath: .fvm/flutter_sdk, so scripts always run against the pinned SDK:

fvm dart run melos run lint:all      # format check + flutter analyze + DCM
fvm dart run melos run lint:format   # dart format --set-exit-if-changed
fvm dart run melos run lint:dart     # flutter analyze
fvm dart run melos run lint:dcm      # dcm analyze
fvm dart run melos run format        # write formatting
fvm dart run melos run test          # flutter test

Run fvm dart run melos run --list to see all scripts. CI runs the very same commands; where FVM is not available, set MELOS_SDK_PATH=auto to run the scripts against the SDK on the PATH.

lint:dcm needs the DCM CLI on the PATH; the version used by CI is pinned in dcm_global.yaml.