https://github.com/leoncolt/background_app_bar

https://github.com/leoncolt/background_app_bar

appbar dart dartlang flutter flutter-package

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/leoncolt/background_app_bar
• Owner: LeonColt
• License: mit
• Created: 2019-08-09T10:17:53.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2025-01-23T03:02:43.000Z (over 1 year ago)
• Last Synced: 2025-03-24T12:21:46.122Z (about 1 year ago)
• Topics: appbar, dart, dartlang, flutter, flutter-package
• Language: Dart
• Size: 3.08 MB
• Stars: 14
• Watchers: 1
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Widget Background App Bar

A background app bar plugin, use this plugin if you want to preserve background of sliver app bar when scrolling,

inspired by GradientAppBar [GitHub](https://github.com/joostlek/GradientAppBar)

## Screenshots

Don't forget to tap + button 5 times

[![Screenshot-1565398534.png](https://i.postimg.cc/WpF6z39h/Screenshot-1565398534.png)](https://postimg.cc/grp6BYbW)

[![Screenshot-1569417041.png](https://i.postimg.cc/28fWXhr0/Screenshot-1569417041.png)](https://postimg.cc/hhphXJJm)

[![Screenshot-1569417048.png](https://i.postimg.cc/bNzJtTzf/Screenshot-1569417048.png)](https://postimg.cc/yWbsq0gL)

[![Screenshot-1569417051.png](https://i.postimg.cc/s2Sy8QVJ/Screenshot-1569417051.png)](https://postimg.cc/yJVw3N3J)

## Getting Started

1. Depend on it by adding this to your pubspec.yaml file: ```background_app_bar: ^1.0.0```

2. Import it: ```import 'package:background_app_bar/background_app_bar.dart'```

3. Replace your current FlexibleSpaceBar (In the AppBar or SliverAppBar) to BackgroundFlexibleSpaceBar.

```dart

SliverAppBar(

    expandedHeight: _kAppBarSize,

    floating: false,

    pinned: true,

    snap: false,

    elevation: 0.0,

    backgroundColor: Colors.transparent,

    flexibleSpace: BackgroundFlexibleSpaceBar(

        title: widget.title != null ? Text(widget.title!) : null,

        centerTitle: false,

        titlePadding: const EdgeInsets.only(left: 20.0, bottom: 20.0),

        background: ClipRect(

            child: Container(

                child: BackdropFilter(

                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),

                    child: Container(

                        decoration: BoxDecoration(

                            color: Colors.black.withOpacity(0.5),

                        ),

                    ),

                ),

                decoration: const BoxDecoration(

                    image: DecorationImage(

                        image: AssetImage("images/bg.jpg"),

                        fit: BoxFit.fill,

                    ),

                ),

            ),

        ),

    ),

)

```