stack_overlay 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 80

StackOverlay Widget plugin for Flutter #

StackOverlay is a widget that will uses 2 stacked screens(widgets). The foreground widget is overlayed over the background one and can be hidden or shown depending on a boolean value passed to the StackOverlay widget, just take a look at the example for more details.

Originally designed to provide as a way of forcing a "login" screen to automatically be shown should a user not be logged in(to whatever service) then dismissed once the user has logged in.

The widget takes 3 values

  • background - this is the background widget (usually the main screen)
  • foreground - this is the dismissable foreground widget( for example a Login screen)
  • showForeground - a boolean to indicate if the foreground widget should be shown or hidden (defaults to false if not provided)

There is now an optional parameter called wallpaper . If this is specified (it must be a BoxDefinition widget) it is used to generate a background to the complete stack. If your other layers have transparent backgrounds the wallpaper will show through - take a look at the updated example code for more details.

Demo Screen (with wallpaper) #

More info can be found here.

Using StackOverlay #

Take a look at the plugin installation instructions.

Getting Started #

For help getting started with Flutter, view the online documentation.

[0.1.1] - 16 November 2018 #

  • removed README from example project

[0.1.0] - 16 November 2018 #

  • Added an optional wallpaper background

[0.0.3] - 12 August 2018 #

  • Documentation updates.

[0.0.2] - 12 August 2018 #

  • update environment to indicate Dart 2 support.

[0.0.1] - 12 August 2018 #

  • initial release.


/// Demo of StackOverlay showing a dismissable Login Screen
/// the login screen can be forced to show on start up or displayed using a button.
/// In the demo this uses a bool called [showOverlay] but this could come
/// from a stored shared_preference to indicate if the user needs to login
/// before continuing with the app
/// The example has been modified to show 3 different ways of adding the (optional) [wallpaper]
/// - as a Linear Gradient
/// - as a tiled image
/// - as a background image
/// Please Note: To allow the Wallpaper to show through you should set (in this example) the Scaffold background color to transparent

import 'package:flutter/material.dart';
import 'package:stack_overlay/stack_overlay.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(title: "Stack Overlay Example", home: OverlayApp());

/// A demo of the StackOverlay Widget
class OverlayApp extends StatefulWidget {
  _OverlayAppState createState() => _OverlayAppState();

class _OverlayAppState extends State<OverlayApp> {
  // initial state of the foreground overlay
  // this will force the login screen to be displayed - change to false to hide by default
  bool showOverlay = true;

  Widget build(BuildContext context) {
    return StackOverlay(
      // determine if foreground should be shown
      showForeground: showOverlay,

      // 1. Add a wallpaper - in this example we use a linear gradient and  
      // Remember to set the foreground scaffold background color to transparent to allow the wallpaper to show through
      wallpaper: BoxDecoration(
          gradient: _ShadedBackground(),

      // 2. Add a wallpaper - in this example we use a single image as a background tile
      // Remember to set the foreground scaffold background color to transparent to allow the wallpaper to show through
      wallpaper: BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage("images/tile.png"), 
          fit: BoxFit.none,
          repeat: ImageRepeat.repeat

      // Add a wallpaper - in this example we use a single image as a background
      // Remember to set the foreground scaffold background color to transparent to allow the wallpaper to show through
      wallpaper: BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage("images/background.jpg"),
          fit: BoxFit.fitHeight,

      // our dismissible foreground widget
      foreground: _LoginScreen(onFinish: () {
        // TODO:: do login stuff here
        setState(() {
          // dismiss the login overlay
          showOverlay = false;

      // our background widget
      background: _BackgroundScreen(
        onLogin: () {
          setState(() {
            // show the login screen
            showOverlay = true;

/// demo [background] widget
class _BackgroundScreen extends StatelessWidget {
  final Function onLogin;

  _BackgroundScreen({@required this.onLogin});

  build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        title: Text("StackOverlay Demo"),
        actions: <Widget>[
            onPressed: onLogin,
            icon: Icon(Icons.person),

/// demo login screen used for our [foreground] widget
class _LoginScreen extends StatelessWidget {
  final Function onFinish;

  _LoginScreen({@required this.onFinish});

  Widget build(BuildContext context) {
    return Container(
        color: Colors.purple,
        padding: EdgeInsets.fromLTRB(30.0, 100.0, 30.0, 100.0),
        child: SafeArea(
            child: Scaffold(
                backgroundColor: Colors.transparent,
                body: ListView(
                  children: <Widget>[
                    Text("Dummy User Login",
                        style: TextStyle(color: Colors.white, fontSize: 20.0)),
                    SizedBox(height: 20.0),
                          InputDecoration(hintText: "username or email"),
                      decoration: InputDecoration(hintText: "password"),
                    SizedBox(height: 20.0),
                      onPressed: onFinish,
                      child: Text("Login"),

// Create a Linear Gradient
class _ShadedBackground extends LinearGradient {
  final AlignmentGeometry begin = Alignment.topCenter;
  final AlignmentGeometry end = Alignment.bottomCenter;
  final List<double> stops = [0.1, 0.4, 0.9];
  static List<Color> _colors = [

  _ShadedBackground() : super(colors: _colors);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  stack_overlay: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:stack_overlay/stack_overlay.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is getting outdated. (-27.95 points)

The package was last published 66 weeks ago.

Update (-2 points)

1 image link is insecure (e.g., use https URLs instead.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies