netglade/sliver_app_bar_builder

netglade

Developed with 💚 by netglade

ci pub package license: MIT style: netglade analysis Discord

---

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)

https://github.com/netglade/sliver_app_bar_builder/raw/main/screenshots/storybook.png

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.