Decorations topic

Decorations

This class is intended to add specific look or behavior to the dialog content.

There are several approaches to applying decoration to the dialog:

• Combine
• Chain
• Builder
• Single

There is no limit to the quantity of decorations.

Combine

It always happens that there are multiple decorations intended to be applied to a dialog. Easy enough, provided list will be applied in a sequential way:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: const EasyDialogDecoration.combine([
      EasyDialogAnimation.fade(),
      EasyDialogAnimation.expansion(),
      EasyDialogDismiss.animatedTap(),
    ]),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

or:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: const EasyDialogAnimation.fade().combined([
      const EasyDialogAnimation.expansion(),
      const EasyDialogDismiss.animatedTap(),
    ]),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

The result will be the same:

Chain

You can chain two decorations one after another:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: const EasyDialogDecoration.chain(
      EasyDialogAnimation.fade(),
      EasyDialogDismiss.swipe(),
    ),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Or chain multiple. In fact, this will provide the same output as combine but using a different syntax:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: const EasyDialogAnimation.fade()
        .chained(const EasyDialogAnimation.expansion())
        .chained(const EasyDialogDismiss.animatedTap()),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Builder

You are able to define your custom decoration using builder constructor:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: EasyDialogDecoration.builder(
      (context, dialog) => ScaleTransition(
        scale: dialog.context.animation,
        child: dialog.content,
      ),
    ),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

You can achieve cool behaviors with this one. For example, you can use other packages such as flutter_animate to create impressive effects.

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    animationConfiguration:
        EasyDialogAnimationConfiguration.withController(
      _controller,
      willReverse: true,
    ),
    decoration: EasyDialogDecoration.builder(
      (context, dialog) => dialog.content
          .animate(controller: _controller)
          .scale(curve: Curves.fastOutSlowIn)
          .shake()
          .elevation()
          .slide()
          .fadeIn(),
    ),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Here is a more complex example:

FlutterEasyDialogs.show(
  EasyDialog.fullScreen(
    autoHideDuration: const Duration(seconds: 1),
    animationConfiguration:
        EasyDialogAnimationConfiguration.withController(
      _controller,
      willReverse: true,
    ),
    decoration: EasyDialogDecoration.builder(
      (context, dialog) => AnimatedBuilder(
        animation: dialog.context.animation,
        builder: (context, child) => ColoredBox(
          color: Colors.yellow.withOpacity(
            dialog.context.animation.value.clamp(0.0, 0.5),
          ),
          child: child,
        ),
        child: Center(
          child: dialog.content
              .animate(controller: _controller)
              .fade()
              .rotate()
              .scale()
              .blur(
                begin: const Offset(20.0, 20.0),
                end: const Offset(0.0, 0.0),
              ),
        ),
      ),
    ),
    content: Container(
      height: 150.0,
      width: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Single decoration

That's it, you can provide only a single decoration.

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    position: EasyDialogPosition.bottom,
    decoration: const EasyDialogAnimation.bounce(),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Animation

Just need to mention that there is specific type of decoration that is used to provide animation to dialog.

Blur background and slide from top:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    autoHideDuration: const Duration(milliseconds: 500),
    decoration: EasyDialogDecoration.combine([
      const EasyDialogAnimation.slideVertical(),
      const EasyDialogAnimation.fade(),
      EasyDialogAnimation.blurBackground(
        backgroundColor: Colors.black.withOpacity(0.2),
      )
    ]),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Full screen fade background and bounce:

FlutterEasyDialogs.show(
  EasyDialog.fullScreen(
    autoHideDuration: const Duration(milliseconds: 500),
    decoration: EasyDialogDecoration.combine([
      const EasyDialogAnimation.bounce(),
      EasyDialogAnimation.fadeBackground(
        backgroundColor: Colors.black.withOpacity(0.2),
      ),
    ]),
    content: Center(
      child: Container(
        height: 150.0,
        color: Colors.blue[900],
        alignment: Alignment.center,
        child: const Text(
          'Dialog',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30.0,
          ),
        ),
      ),
    ),
  ),
);

There are some helpful extension methods:

• reversed - will reverse the decided animation.
• interval - will play the animation within the provided interval.
• tween sequence - will apply the provided TweenSequence to the animation.

A bit of fun:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    autoHideDuration: const Duration(milliseconds: 500),
    decoration: EasyDialogDecoration.combine([
      const EasyDialogAnimation.fade().interval(0.0, 0.5),
      const EasyDialogAnimation.expansion().reversed(),
      EasyDialogAnimation.fadeBackground(
        backgroundColor: Colors.black.withOpacity(0.6),
      ).tweenSequence(
        TweenSequence([
          TweenSequenceItem(
              tween: Tween(begin: 0.0, end: 0.5), weight: 100),
        ]),
      ),
    ]),

Dismiss

Generally, it is the way to dismiss dialogs with provided callback which returns some result.

There are a few important things you need to know:

• OnEasyDismissed: a callback that fires when the dialog is dismissed. You can provide some data to be returned as a result of showing the dialog.
• EasyWillDismiss: a callback that fires when the dialog is about to be dismissed. You can decide whether it should be dismissed or not. It is quite similar to WillPopCallback.

final res = await FlutterEasyDialogs.show<int>(
  EasyDialog.positioned(
    decoration: const EasyDialogAnimation.fade().chained(
      EasyDialogDismiss.swipe(
        onDismissed: () => 5,
        direction: DismissDirection.vertical,
      ),
    ),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Or:

final content = Container(
  height: 150.0,
  color: Colors.blue[900],
  alignment: Alignment.center,
  child: const Text(
    'Dialog',
    style: TextStyle(
      color: Colors.white,
      fontSize: 30.0,
    ),
  ),
);

final res = await content
    .positioned()
    .fade()
    .swipe(
      direction: DismissDirection.vertical,
      onDismissed: () => 5,
    )
    .show<int>();

Imagination

You can achieve fascinating results; you are only limited by your imagination!

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: EasyDialogDecoration.combine([
      const EasyDialogAnimation.fade(),
      const EasyDialogAnimation.expansion(),
      const EasyDialogDismiss.animatedTap(),
      const EasyDialogDismiss.swipe(instantly: false),
      EasyDialogAnimation.fadeBackground(
        backgroundColor: Colors.black.withOpacity(0.6),
      ),
    ]),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Or:

final content = Container(
  height: 150.0,
  color: Colors.blue[900],
  alignment: Alignment.center,
  child: const Text(
    'Dialog',
    style: TextStyle(
      color: Colors.white,
      fontSize: 30.0,
    ),
  ),
);

content
    .positioned()
    .fade()
    .expansion()
    .animatedTap()
    .swipe(instantly: false)
    .fadeBackground(
      backgroundColor: Colors.black.withOpacity(0.6),
    )
    .show();

Classes

EasyDialogAnimation<D extends EasyDialog>

Its main purpose is to apply an animation effect to the provided EasyDialog.

EasyDialogAnimation<D extends EasyDialog>

Its main purpose is to apply an animation effect to the provided EasyDialog.

EasyDialogAnimation<D extends EasyDialog>

Its main purpose is to apply an animation effect to the provided EasyDialog.

EasyDialogDecoration<D extends EasyDialog>

This class is intended to be used by D dialog to apply some decorations.

EasyDialogDecoration<D extends EasyDialog>

This class is intended to be used by D dialog to apply some decorations.

EasyDialogDecoration<D extends EasyDialog>

This class is intended to be used by D dialog to apply some decorations.

EasyDialogDismiss<D extends EasyDialog>

The main purpose is to make EasyDialog dismissible.

EasyDialogDismiss<D extends EasyDialog>

The main purpose is to make EasyDialog dismissible.

EasyDialogDismiss<D extends EasyDialog>

The main purpose is to make EasyDialog dismissible.

Typedefs

OnEasyDismissed = FutureOr<Object?> Function()

Dismiss callback.

OnEasyDismissed = FutureOr<Object?> Function()

Dismiss callback.

OnEasyDismissed = FutureOr<Object?> Function()

Dismiss callback.