Flutter Appbar

Version	v1.0.0-dev1

Introduction #

This package implements the flexible appbar behavior, And we pursue higher performance and responsiveness than the appbar generally provided by Flutter.

Preview #

The gif image below may appear distorted and choppy due to compression.

Usage #

The following explains the basic usage of this package.

How to apply the appbar? #

To simply apply an app bar to your application, you can use the AppBarConnection and the AppBar widgets like this.

See Also, if you define a separate ScrollController to control the Scrollable widget, you must explicitly pass that ScrollController instance to the scrollController property of AppBarConnection.

AppBarConnection(
  appBars: [
    AppBar(
      behavior: MaterialAppBarBehavior(),
      body: Container(
        width: double.infinity,
        height: 300,
        color: Colors.red,
        alignment: Alignment.center,
        child: Text("Header", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
      ),
    )
  ],
  child: ListView.builder(
    physics: BouncingScrollPhysics(),
    itemCount: 100,
    itemBuilder: (context, index) {
      return Text("Hello, World! $index");
    },
  ),
)

How to apply effects according to appbar position? #

AppBar.builder(
  behavior: MaterialAppBarBehavior(),
  builder: (context, position) {
    position.expandedPercent; // 1.0
    position.shrinkedPercent; // 0.0
    return ...;
  }
)

How to customize appbar alignment? #

Try applying the AppBarAlignment that is a providing standard enumeration in this package.

AppBar(
  behavior: MaterialAppBarBehavior(),
  alignment: AppBarAlignment.center, // like this
  body: ...
)

The Properties of AppBarAlignment #