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.
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.
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.
BSD 3-Clause License. Please see License File for more information.