Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Packages

A Flutter Package to Build Complex Overlays

August 9, 2020
in Flutter Packages, Widgets
3 min read
A Flutter Package to Build Complex Overlays

Overlay Widget Package

This package can help you insert and remove multiple widgets into an overlay without having to manage them yourself. It will also provide you with a simple method to close an overlay, if you wish to control that manually.

RELATED FLUTTER RESOURCES

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

A Beautiful Bottom navigation bar with bubble click effect in Flutter

A Verification Code Input Widget to get Value in Flutter.

Screenshot

How to use 

Add overlay to pubspec.yaml of your project:

ADVERTISEMENT
dependencies:
  overlay: ^0.0.1

Import it in your Dart code:

import 'package:overlay/overlay.dart';

In any action or button, which triggers an overlay, call the constructor for the class CustomOverlay and pass the context and the widget

The overlayWidget way: 

    MaterialButton(
      color: Colors.lightBlueAccent,
      child: Text('Use Overlay Widget'),
      // Call CustomOverlay Constructor in on pressed function
      onPressed: () => CustomOverlay(
        context: context,
        // Using overlayWidget
        overlayWidget: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Text(
                  'This widget is passed to the overlay using overlayWidget so there is no close button, but you can always close this overlay by tapping anywhere in the darker areas.'),
            ),
          ),
        ),
      ),
    ),

The builder way: 

Builder passes aa function removeOverlay as argument which can be used to manually remove the overlay

    MaterialButton(
      color: Colors.lightBlueAccent,
      child: Text('Use Overlay Builder'),
      // Call CustomOverlay Constructor in on pressed function
      onPressed: () => CustomOverlay(
        context: context,
        // Builder passes aa function removeOverlay as argument which can be used to manually remove the overlay
        builder: (removeOverlay) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Column(
                children: <Widget>[
                  Text(
                    'This widget is passed to the overlay using the builder method so there is a close button, but you can also close this overlay by tapping anywhere in the darker areas.',
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FlatButton(
                          onPressed: removeOverlay,
                          child: Text('Close'))
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    ),

GitHub

This widget helps you easily build complex overlays
https://github.com/maddyb99/flutter_overlay
1 forks.
5 stars.
0 open issues.

Recent commits:
  • spelling mistake in Readme file. (#2), GitHub
  • remove overlay card and added example, maddyb99
  • ready for export, maddyb99
  • upgrade build environment, maddyb99
  • try build from workflow, maddyb99

DOWNLOAD SOURCE CODE

RelatedFlutter Resource

Navigation

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

September 15, 2020
A Beautiful Bottom navigation bar with bubble click effect in Flutter
Navigation

A Beautiful Bottom navigation bar with bubble click effect in Flutter

September 15, 2020
A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
How to select & Pick a Countries from a List in Flutter
Flutter Packages

How to select & Pick a Countries from a List in Flutter

September 2, 2020
How To Record Audio Mp3 using Native API in Flutter
Flutter Packages

How To Record Audio Mp3 using Native API in Flutter

September 2, 2020
How To Display Flag on Your Flutter App Using the Flag Package
Flutter Packages

How To Display Flag on Your Flutter App Using the Flag Package

August 19, 2020
Next Post
Flutter Custom Form Builder Package – Create Full Complex Form

Flutter Custom Form Builder Package - Create Full Complex Form

Create Stories like Instagram & WhatsApp Status – Flutter Package

Create Stories like Instagram & WhatsApp Status - Flutter Package

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Simple & Beautiful ToDo App Made with Flutter

A Simple & Beautiful ToDo App Made with Flutter

September 1, 2020
What Is A “Completer” in Flutter Dart

What Is A “Completer” in Flutter Dart

June 24, 2020
Flutter Custom Form Builder Package – Create Full Complex Form

Flutter Custom Form Builder Package – Create Full Complex Form

August 9, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • How to use the Flutter Text Field and Input Widget

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In