Dialogs topic

Dialogs

Positioned dialogs

This type of dialogs is used to show at a specific place on the screen using EasyDialogPosition.

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    position: EasyDialogPosition.top,
    content: Container(
      height: 150.0,
      color: Colors.amber[900],
      alignment: Alignment.center,
      child: Text('Dialog'),
    ),
  ),
);

Or:

Container(
  height: 150.0,
  color: Colors.amber[900],
  alignment: Alignment.center,
  child: Text('Dialog'),
).positioned(position: EasyDialogPosition.top).show();

Since version 3.2.0 you can make dialog draggable:

final content = Container(
  height: 150.0,
  color: Colors.amber[900],
  alignment: Alignment.center,
  child: Text('Dialog'),
);

content
    .positioned()
    .draggable()
    .show();

FullScreen dialogs

These dialogs are intended to cover all available space on the screen and be presented one at a time. There is a special behavior available to detect the Android software back button and handle it:

FlutterEasyDialogs.show(
  EasyDialog.fullScreen( 
    content: Container(
      height: 150.0,
      color: Colors.amber[900],
      alignment: Alignment.center,
      child: Text('Dialog'),
    ),
  ),
);

Or:

Container(
  height: 150.0,
  color: Colors.amber[900],
  alignment: Alignment.center,
  child: Text('Dialog'),
).fullScreen().show();

Tooltip dialogs

Since version 4.1.0 you can show a tooltip next to a specific widget.

Wrap the widget with EasyTooltipTarget and give it an id. It must be placed below FlutterEasyDialogs:

EasyTooltipTarget(
  id: 'profile',
  child: IconButton(
    icon: const Icon(Icons.person),
    onPressed: () {},
  ),
);

Then show a TooltipDialog with the same targetId:

FlutterEasyDialogs.show(
  EasyDialog.tooltip(
    targetId: 'profile',
    alignment: Alignment.bottomCenter,
    decoration: const TooltipShell.bubble().chained(
      const EasyDialogAnimation.fade(),
    ),
    content: const Text('Your profile'),
  ),
);

Or:

const Text('Your profile')
    .tooltip(targetId: 'profile', alignment: Alignment.bottomCenter)
    .decorate(const TooltipShell.bubble())
    .tapOutside()
    .fade()
    .show();

The id of the dialog is the targetId unless provided, so it can be hidden like so:

FlutterEasyDialogs.hide(id: 'profile');

alignment defines where the tooltip is placed relative to the target:

  • Alignment.topCenter (default) - above the target, centered.
  • Alignment.topLeft / Alignment.topRight - above the target, left / right edges are aligned.
  • Alignment.centerLeft / Alignment.centerRight - to the left / right of the target.
  • Alignment.center - over the target.

The same goes for the bottom ones. An additional offset can be provided as well.

The tooltip:

  • follows the target, e.g. while scrolling;
  • stays within the screen: it is shifted along the target's side, and its width is limited by the space next to the target, so long content wraps;
  • is hidden instantly when the target is unmounted (e.g. scrolled away in a lazy list).

TooltipShell.bubble is a ready to use bubble with an arrow pointing at the target. Its color, padding, border radius, border, arrow size, shadows and text style can be customized. The content can be any widget.

TooltipDialog supports all animations and dismisses. Use EasyDialogDismiss.tapOutside to dismiss the tooltip on tap outside of it. Apply it before full screen background animations (blurBackground, fadeBackground), so a tap on the background counts as outside.

Basic parameters

  • content - widget that is desired to be shown.
  • animation configuration - responsible for configuring animation duration, start value, etc. It also provides an opportunity to create a configuration with an external AnimationController that will drive the dialog animation.
  • auto hide duration: duration after which the dialog will be automatically hidden. If you pass null the dialog won't auto hide at all.
  • decoration: a provided decoration that will be applied to the content.

Context

Each dialog has its own context, which is a class that contains helpful methods and properties, such as the animation associated with the dialog:

dialog.context.animation;
dialog.context.hideDialog();
dialog.context.vsync;

Classes

EasyDialog Getting started Dialogs
Base dialog class.
EasyDialogAnimationConfiguration Dialogs Migration guide from 2.x to 3.x
Configuration of EasyDialogAnimation.
EasyDialogContext Getting started Dialogs
Context that provides some useful methods and properties that are associated with specific EasyDialog.
EasyDialogsController Getting started Dialogs Migration guide from 2.x to 3.x
Core class for manipulating dialogs.
FlutterEasyDialogs Getting started Dialogs Migration guide from 2.x to 3.x FAQ
Wrapper for providing an easy use of different custom dialogs.