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

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

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

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

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: ...,
    ),
  );
}

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: ...,
      ),
    ),
  );
}

See a complete example.

// 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();

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

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.

Please send feature requests and bugs at the issue tracker.

• Edson Onildo
• All Contributors

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