overlay_screen 1.2.0+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 65

Overlay Screen #

A Flutter plugin to easily display and dispose overlay screens anywhere in your app.

NOTE: This package was made with Flutter 1.17 and Dart 2.8, make sure you have your environment within the version range.

environment:
  sdk: ">=2.7.0 <3.0.0"
  flutter: ">=1.10.0"

Getting Started #

To use this plugin, add overlay_screen as a dependency in your pubspec.yaml file. For example:

dependencies:
  overlay_screen: ^1.2.0+1

Usage #

Import the package:

import 'package:overlay_screen/overlay_screen.dart';

NOTE: It's not necessary to set a variable of the class like:

OverlayScreen loading = OverlayScreen();

You can just call the OverlayScreen() class and use its methods like:

OverlayScreen().show(context);

Functions #

  • saveScreens

This method takes a Map<String, CustomOverlayScreen>to save it and allows you to use it later with the show method.

OverlayScreen().saveScreens({
  String: CustomOverlayScreen(
    backgroundColor: Color,
    content: Widget, 
  ),
  String: CustomOverlayScreen(
    backgroundColor: Color,
    content: Widget, 
  ),
  String: CustomOverlayScreen(
    backgroundColor: Color,
    content: Widget, 
  ),
  ...
});
  • removeScreens

This method removes widgets to display by show.

OverlayScreen().removeScreens([String, String, String...]);
  • show

This method displays an OverlayScreen by an identifier.

OverlayScreen().show(
  BuildContext context,
  identifier: String,
);
  • pop

This method dispose an OverlayScreen displayed.

OverlayScreen().pop();
  • state

OverlayScreen also has the state getter to know if a overlay screen is displayed when it is Screen.showing or nothing is displayed when it is Screen.none.

OverlayScreen().state;

License #

MIT License

1.2.0+1 #

  • Remake of the LoadingScreen Plugin to get a better context
  • Better gif in README.md.
  • Added one more overlayScreen in example.

example/lib/main.dart

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

import 'package:overlay_screen/overlay_screen.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    OverlayScreen().saveScreens({
      'dialog': CustomOverlayScreen(
        backgroundColor: Colors.transparent,
        content: Dialog(
          child: SizedBox(
            height: 180.0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'No internet connection!!',
                  style: TextStyle(
                    fontSize: 25.0,
                    fontStyle: FontStyle.italic,
                  ),
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 10.0),
                Text(
                  "waiting..",
                  style: TextStyle(
                    fontSize: 15.0,
                    fontStyle: FontStyle.italic,
                  ),
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 10.0),
                SizedBox(
                  height: 20.0,
                  width: 20.0,
                  child: CircularProgressIndicator(),
                ),
              ],
            ),
          ),
        ),
      ),
      'custom1': CustomOverlayScreen(
        backgroundColor: Colors.blue.withOpacity(0.5),
        content: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.backup,
              color: Colors.white,
            ),
            SizedBox(height: 10.0),
            Text(
              "Uploading data...",
              style: TextStyle(
                color: Colors.white,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
      ),
      'custom2': CustomOverlayScreen(
        backgroundColor: Colors.yellow[400],
        content: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.check_circle_outline,
              color: Colors.green,
              size: 80.0,
            ),
            Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Text("Let's start!"))
          ],
        ),
      ),
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("default loading"),
              onPressed: () async {
                OverlayScreen().show(context);
                await Future.delayed(
                  Duration(seconds: 2),
                  () => print("loading something"),
                );
                OverlayScreen().pop();
              },
            ),
            RaisedButton(
              child: Text("dialog loading"),
              onPressed: () async {
                OverlayScreen().show(
                  context,
                  identifier: 'dialog',
                );
                await Future.delayed(
                  Duration(seconds: 2),
                  () => print("loading something"),
                );
                OverlayScreen().pop();
              },
            ),
            RaisedButton(
              child: Text("custom1 overlay"),
              onPressed: () async {
                OverlayScreen().show(
                  context,
                  identifier: 'custom1',
                );
                await Future.delayed(
                  Duration(seconds: 2),
                  () => OverlayScreen().pop(),
                );
              },
            ),
            RaisedButton(
              child: Text("custom2 overlay"),
              onPressed: () async {
                OverlayScreen().show(
                  context,
                  identifier: 'custom2',
                );
                await Future.delayed(
                  Duration(seconds: 2),
                  () => OverlayScreen().pop(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  overlay_screen: ^1.2.0+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:overlay_screen/overlay_screen.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
30
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
65
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because:

  • package:overlay_screen/overlay_screen.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because:

  • package:overlay_screen/overlay_screen.dart that declares support for platforms: android, ios

Package does not support Flutter platform web

Because:

  • package:overlay_screen/overlay_screen.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because:

  • package:overlay_screen/overlay_screen.dart that declares support for platforms: android, ios

Package not compatible with SDK dart

Because:

  • overlay_screen that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test