gizmos_hud 0.0.1-alpha.1

Flutter Android iOS web

A Flutter package for displaying custom HUD's, Toasts, or other screen overlays. Any widget can be displayed, in any position on the screen for a completely customized interface.

gizmos_hud #

badge-pubdev badge-platforms badge-language badge-license

badge-sponsors badge-githubsponsors badge-patreon

badge-twitter badge-twitter-gizmosdev

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 #

iOS Demo Android Demo

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?

gizmosdev-logo gizmos.dev #

5
likes
110
pub points
48%
popularity

Publisher

gizmos.dev

A Flutter package for displaying custom HUD's, Toasts, or other screen overlays. Any widget can be displayed, in any position on the screen for a completely customized interface.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on gizmos_hud