gizmos_hud

A Flutter package for displaying custom HUDs, Toasts, Pop-Ups, Dialogs or other screen overlays. Any widget can be displayed, in any position on the screen for a completely customized interface.

Installation

To use this package, add gizmos_hud as a dependency in your pubspec.yaml file.

dependencies:
  gizmos_hud: any

Import the library

import 'package:gizmos_hud/gizmos_hud.dart';

Usage

For each overlay you want to use in your app, create a Hud instance.

To display the Hud, call the show(). To hide it, call hide().

show()

Parameter: context required

The context is the BuildContext that will be used to present the hud. Depending on where/how you're displaying the hud, this won't likely be the context for the current build() method. Because we want the hud to have access to the full screen, you need to pass in the context for the top most page.

Parameter: child required

The child parameter is the Widget to be displayed.

Parameter: position

The position parameter determines where the hud is displayed. There are four options:

HudPosition.top

For HudPosition.top, the top parameter becomes the offset (defaults to 100) from the top of the context. You must also pass in either a width with an optional left or right value, or omit width and specify both left and right values. height is also required.

HudPosition.bottom

For HudPosition.bottom, the bottom parameter becomes the offset (defaults to 100) from the bottom of the context. You must also pass in either a width with an optional left or right value, or omit width and specify both left and right values. height is also required.

HudPosition.center

For HudPosition.center, width and height are required, top, bottom, left, right should be omitted.

HudPosition.custom

For a position of HudPosition.custom, the positional parameters are passed directly to a Position Widget.

Parameter: duration

Set a duration to have the hud automatically fade out after that duration has passed. Omit duration to have the overlay stay on screen until programmatically dismissed by calling the hide() method.

Parameter: isBlocking

Set isBlocking to true to create a full screen background behind the hud that blocks user interaction.

Parameter: backgroundColor

backgroundColor specifies the colour to display behind the hud. Currently this is ignored if isBlocking is set to true, however I expect that to change in a later version.

Parameter: hudDecoration

Use hudDecoration to display a custom BoxDecoration as the background of the hud. There are two default hudDecorations included that you can use: Hud.defaultDarkHudDecoration and Hud.defaultLightHudDecoration

Parameter: hudColor

The hudColor parameter can be used as a shortcut to create a basic hudDecoration.

Parameter: left/top/right/bottom/width/height

These parameters are related to position above.

hide()

The only parameter in hide() is the optional boolean animated that specifies whether or not to animate (fade out) the Hud. This defaults to true.

Samples

 

Example

fancyToastHud.show(
  context: topBuildContext,
  child: child,
  hudDecoration: fancyHudDecoration,
  position: HudPosition.top,
  duration: Duration(seconds: 3),
  width: 280,
  height: 50,
  top: 120,
);

Please see the example app in this package for a full example.

Notes

• This is my first Flutter package, and I'm still learning the Flutter way of doing things so a lot of this package may change. Please send me suggestions/bug fixes.
• Some initial questions:
  • Is there a better way to get the topBuildContext?
    • Is there a better way to handle the fade in/out, rather than using the delay/markNeedsBuild process?

  ---

gizmos.dev