Widget Background App Bar

Overview

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

Screenshots

Don't forget to tap + button 5 times

Screenshot-1565398534.png Screenshot-1569417041.png Screenshot-1569417048.png Screenshot-1569417051.png

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.

new SliverAppBar(
    expandedHeight: _APP_BAR_SIZE,
    floating: false,
    pinned: true,
    snap: false,
    elevation: 0.0,
    backgroundColor: Colors.transparent,
    flexibleSpace: new BackgroundFlexibleSpaceBar(
        title: new Text( widget.title ),
        centerTitle: false,
        titlePadding: const EdgeInsets.only(left: 20.0, bottom: 20.0),
        background: new ClipRect(
            child: new Container(
                child: new BackdropFilter(
                    filter: new ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                    child: new Container(
                        decoration: new BoxDecoration(
                            color: Colors.black.withOpacity(0.5),
                        ),
                    ),
                ),
                decoration: new BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                            "images/bg.jpg",
                        ),
                        fit: BoxFit.fitWidth
					)
				),
			),
		),
	),
)
You might also like...

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

A widget lib that the widget in this lib can react to flutter ScrollController's offset

A widget lib that the widget in this lib can react to flutter ScrollController's  offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Oct 16, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Dec 1, 2022

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Nov 25, 2022

Flutter package which helps you to implement Ticket Widget in your app.

Flutter package which helps you to implement Ticket Widget in your app.

✨ Ticket Widget Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and it is an updated null safe v

Dec 30, 2022

React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Dec 29, 2022

A credit card widget for Flutter application.

A credit card widget for Flutter application.

A credit card widget for Flutter application.

Dec 27, 2022

A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Oct 9, 2022

Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Dec 7, 2022
Comments
  • stretchModes property

    stretchModes property

    Flutter added stretchModes properties in FlexibleSpaceBar which allows us to zoom or blur the image when user tries to scroll below minimum limit.

    flexibleSpace: FlexibleSpaceBar(
        flexibleSpace: BackgroundFlexibleSpaceBar(
            stretchModes: const [
               StretchMode.zoomBackground,
               StretchMode.blurBackground,
               StretchMode.fadeTitle,
            ],
    )
    

    I think it is nice to have this in this library.

    opened by hetthummar 1
Releases(2.0.1)
Owner
null
"wi_custom_bar" - a custom bar widget that implements a thermometer gauge bar created by wannai team

About wi_custom_bar "wi_custom_bar" is a custom bar widget that implements a thermometer gauge bar created by wannai team. Installing: In your pubspec

null 3 Feb 23, 2022
Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Animated Search Bar Animated Search Bar package lets you add a beautiful search bar to your Flutter app. Installation Add the latest version of packag

Mohammad Saleh 5 Aug 7, 2022
A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Prem Adithya 9 Jul 13, 2022
A Simple and easy to use flutter package for showing progress bar.

progress_dialog A Simple and easy to use flutter package for showing progress bar. #Usage Import the package import 'package:custom_progress_dialog/cu

Vikas Jilla 6 May 23, 2022
Square progress bar

Square progress bar because why not ?? Features Dynamic sizing Animated progress bar Gradient color progress bar Prgreess bar cap shape customization

Yasir Rmaya 5 Dec 2, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023