ScrollAppBar

Hide or show app bar while scrolling. This package works without custom scroll views and slivers. So, you can use this widget in a scaffold widget, that turns your code more simple.

Simple scroll Snap behavior
n1 n2

Roadmap

This is currently our roadmap, please feel free to request additions/changes.

Feature Progress
Simple scroll ✅
Snap behavior ✅
Pin/unpin ✅
Gradient background ✅
Transparent background ✅

NOTE: Try use this package with scroll_bottom_navigation_bar package to a better user experience. See an example.

Usage

Getting started

Add scroll_app_bar package to your project. You can do this following this steps.

Basic implementation

First, you need a ScrollController instance.

final controller = ScrollController();

This controller is required in order to get the main functionality of this package. You need to pass it on ScrollAppBar's controller and inside your ListView, also in controller property. Without this, you'll get an ordinary App Bar.

Now, you can use the ScrollAppBar widget in a Scaffold widget, and attach ScrollController instance in your scrollable main widget.

NOTE: Showing only essencial code. See example section to a complete implementation.

@override
Widget build(BuildContext context) {
  Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // Note the controller here
      title: Text("App Bar"),
    ),
    body: ListView.builder(
      controller: controller, // Controller is also here
      itemBuilder: ...,
    ),
  );
}

Snap behavior

To enable the snap behavior, you need just wrap the main scrollable widget with a Snap widget and attach controller.

@override
Widget build(BuildContext context) {
  Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // Note the controller here
      title: Text("App Bar"),
    ),
    body: Snap(
      controller: controller.appBar,
      child: ListView.builder(
        controller: controller, // Controller is also here
        itemBuilder: ...,
      ),
    ),
  );
}

Example

See a complete example.

API Reference

// Returns the total height of the bar
controller.appBar.height;

// Notifier of the visible height factor of bar
controller.appBar.heightNotifier;

// Notifier of the pin state changes
controller.appBar.isPinned;

// Returns [true] if the bar is pinned or [false] if the bar is not pinned
controller.appBar.pinNotifier;

// Set a new pin state
controller.appBar.setPinState(state);

// Toogle the pin state
controller.appBar.tooglePinState();

// Discards resource
controller.appBar.dispose();

Change log

Please see CHANGELOG for more information on what has changed recently.

Troubleshooting

My AppBar doesn't move like intended

Have you assigned the ScrollController to the controller property of ScrollAppBar and inside your ListView? This is required in order to get the main functionality.

Contributing

Please send feature requests and bugs at the issue tracker.

Credits

License

BSD 3-Clause License. Please see License File for more information.

Libraries

scroll_app_bar