owlet_toast 0.0.2

Owlet Toast is the toast interface provider for the delegate to build your custom toast base on OverlayManager.

Owlet Toast

Owlet Toast uses the overlay for show your custom toast via the OverlayManager.

You can customize your toast's UI and Owlet Toast will make it show on the screen with the animation effect. You also customize your animation effect.

Import

dependencies:
   owlet_toast: ^0.0.2

Usage

Create a global OwletToast with GlobalKey<NavigatorState>(). You also inject it on injection or use a singleton.

final navKey = GlobalKey<NavigatorState>();
final appToast = OwletToast.global(navKey);

or a context OwletToast:

final appToast =  OwletToast.of(context);

Use it

To show your toast, let's call appToast.show().

Future<R?> showInformation<R extends Object>(String message) {
  return appToast.show(
          builder: (context, entry, child) => Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 3, spreadRadius: 4)]),
            child: const Text("This is toast's message"),
          ),
          alignment: const Alignment(0, -0.7),
          transitionDelegate: const TranslateTransitionDelegate(direction: Alignment.topCenter),
          transitionDuration: const Duration(milliseconds: 500),
          holdDuration: const Duration(seconds: 1));
}

...and call:

showInformation('Hello World');

ToastTransitionDelegate

In default, there are 3 ToastTransitionDelegate in owlet_toast package

• With TranslateTransitionDelegate, the toast will be shown with transform animation from the start position to the destination position with the defined direction.

• With FadeTransitionDelegate, the toast will appear and dismiss with fade animation.

Some custom animation with FadeTransitionDelegate in example.:

• With ShakeTransitionDelegate, the toast will appear with a shake animation and dismiss with a fade animation.

To customize your toast transition animation, please override the transition or opacity method in ToastTransitionDelegate.

class CustomTransitionDelegate with ToastTransitionDelegate{ 
  @override
  Offset transition(AnimationStatus animationStatus, double animationValue) {
    // TODO: implement transition
    throw UnimplementedError();
  }

  @override
  double opacity(AnimationStatus animationStatus, double animationValue) {
    // TODO: implement opacity
    return super.opacity(animationStatus, animationValue);
  }
}

Tips!

• Toast appearance area is inside the MediaQuery.viewInsetsOf(context).
• Using Alignment not only aligns your toast's widget but also moves the original position to a factor of the screen.

Example: Alignment(0, -0.7) will move your widget to 0.5 x screen width (center x) and 0.6 x screen height (zero point is in center of screen).

• Override ToastTransitionDelegate.transition also changes the original position of toast's widget.

Features and bugs

Please file feature requests and bugs at the issue tracker.