owlet_toast 0.0.1 owlet_toast: ^0.0.1 copied to clipboard
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.1
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 thestart
position to thedestination
position with the defineddirection
.
- 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 to0.5 x screen width
(center x) and0.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.