owlet_toast

Description:

owlet toast

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
copied to clipboard
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);
copied to clipboard
or a context OwletToast:
final appToast = OwletToast.of(context);
copied to clipboard
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));
}
copied to clipboard
...and call:
showInformation('Hello World');
copied to clipboard
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);
}
}
copied to clipboard
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.