appbar_elevation

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The appbar_elevation package provides a Flutter widget that creates an AppBar initially flush with the screen body and automatically elevates (rises) when the user scrolls down. This behavior enhances visual hierarchy by revealing the AppBar only during scrolling, offering a clean initial view. It's ideal for apps with long content lists where a dynamic AppBar improves UX. The widget is lightweight and integrates seamlessly into existing scrollable layouts like ListView or CustomScrollView. It supports smooth transitions and works without requiring complex custom logic. The source code is publicly available on GitHub for transparency and contribution.

Use cases

Dynamic AppBar appearance in scrollable lists
Enhancing UI with subtle elevation effects
Creating modern, responsive app interfaces
Improving visual feedback during scrolling
Simplifying AppBar elevation logic

Key features

Auto-elevates on scroll
Initial flush state with body
Smooth transition animation
Lightweight and easy to integrate
Works with ListView and CustomScrollView

Suitable for

Developers seeking elegant AppBar behavior
Apps with long scrollable content
UI-focused Flutter projects
Minimalist design implementations
Projects aiming for native-like scrolling effects

Considerations

Requires scrollable parent container
Limited customization beyond elevation
No support for platform-specific behaviors
May need additional styling for non-default themes
Not suitable for static or non-scrolling screens

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

A Flutter Widget for an AppBar that is initially flush with the body and elevated when scrolled.

Usage

Use the ScrollActivatedAppBarElevation widget to wrap a Scaffold that contains a Scrollable view (e.g. ListView, CustomScrollView). The widget uses a NotificationListener to detect the scroll position and provides an appBarElevation value to be used.

Example

@override
Widget build(BuildContext context) {
  return ScrollActivatedAppBarElevation(
    builder: (BuildContext context, double appBarElevation) {
      return Scaffold(
        appBar: AppBar(
          elevation: appBarElevation,
        ),
        body: ListView(
          children: [
            // ...
          ],
        ),
      );
    },
  );
}

See example for full code.

License

BSD

Search packages, repositories and app categories