Support animation of show/hide toast.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change log
 
+## 2.3.0
+
+New feature:
+
+- Add animation for show/hide the oktoast.
+
 ## 2.2.1
 
 Fix:

README.md

@@ -41,7 +41,7 @@ latest version: [![pub package](https://img.shields.io/pub/v/oktoast.svg)](https
 
 ```yaml
 dependencies:
-  oktoast: ^2.2.1 # such as version, you need use the latest version of pub.
+  oktoast: ^2.3.0 # such as version, you need use the latest version of pub.
 ```
 
 ### 2. Import library in dart file
@@ -82,59 +82,70 @@ There are two reasons why you need to wrap MaterialApp
 
 oktoast have default style, and you also can custom style or other behavior.
 
-|         name         |        type        |   need   |                             desc                              |
-| :------------------: | :----------------: | :------: | :-----------------------------------------------------------: |
-|        child         |       Widget       | required |                     Usually Material App                      |
-|      textStyle       |     TextStyle      | optional |                                                               |
-|        radius        |       double       | optional |                                                               |
-|   backgroundColor    |       Color        | optional |                        backroundColor                         |
-|       position       |   ToastPosition    | optional |                                                               |
-|  dismissOtherOnShow  |        bool        | optional |    If true, other toasts will be dismissed. Default false.    |
-| movingOnWindowChange |        bool        | optional | If true, when the size changes, toast is moved. Default true. |
-|    textDirection     |   TextDirection    | optional |                                                               |
-|     textPadding      | EdgeInsetsGeometry | optional |                     Outer margin of text                      |
-|      textAlign       |     TextAlign      | optional |          When the text wraps, the align of the text.          |
-|     handleTouch      |        bool        | optional | Default is false, if it's true, can responed use touch event. |
+|         name         |          type           |   need   |                             desc                              |
+| :------------------: | :---------------------: | :------: | :-----------------------------------------------------------: |
+|        child         |         Widget          | required |                     Usually Material App                      |
+|      textStyle       |        TextStyle        | optional |                                                               |
+|        radius        |         double          | optional |                                                               |
+|   backgroundColor    |          Color          | optional |                        backroundColor                         |
+|       position       |      ToastPosition      | optional |                                                               |
+|  dismissOtherOnShow  |          bool           | optional |    If true, other toasts will be dismissed. Default false.    |
+| movingOnWindowChange |          bool           | optional | If true, when the size changes, toast is moved. Default true. |
+|    textDirection     |      TextDirection      | optional |                                                               |
+|     textPadding      |   EdgeInsetsGeometry    | optional |                     Outer margin of text                      |
+|      textAlign       |        TextAlign        | optional |          When the text wraps, the align of the text.          |
+|     handleTouch      |          bool           | optional | Default is false, if it's true, can responed use touch event. |
+|   animationBuilder   | OKToastAnimationBuilder | optional |              Add animation to show / hide toast.              |
+|  animationDuration   |        Duration         | optional |                  The duration of animation.                   |
+|    animationCurve    |          Curve          | optional |                      Curve of animation.                      |
 
 ### Method `showToast`
 
-Display text on toast
-
-|       name        |        type        |   need   | desc |
-| :---------------: | :----------------: | :------: | :--: |
-|        msg        |       String       | required |      |
-|      context      |    BuildContext    | optional |      |
-|     duration      |      Duration      | optional |      |
-|     position      |   ToastPosition    | optional |      |
-|     textStyle     |     TextStyle      | optional |      |
-|    textPadding    | EdgeInsetsGeometry | optional |      |
-|  backgroundColor  |       Color        | optional |      |
-|      radius       |       double       | optional |      |
-|     onDismiss     |      Function      | optional |      |
-|   textDirection   |   TextDirection    | optional |      |
-| dismissOtherToast |        bool        | optional |      |
-|     textAlign     |     TextAlign      | optional |      |
+Display text on toast.
+
+Description of params see `OKToast`.
+
+|       name        |          type           |   need   |      desc      |
+| :---------------: | :---------------------: | :------: | :------------: |
+|        msg        |         String          | required | Text of toast. |
+|      context      |      BuildContext       | optional |                |
+|     duration      |        Duration         | optional |                |
+|     position      |      ToastPosition      | optional |                |
+|     textStyle     |        TextStyle        | optional |                |
+|    textPadding    |   EdgeInsetsGeometry    | optional |                |
+|  backgroundColor  |          Color          | optional |                |
+|      radius       |         double          | optional |                |
+|     onDismiss     |        Function         | optional |                |
+|   textDirection   |      TextDirection      | optional |                |
+| dismissOtherToast |          bool           | optional |                |
+|     textAlign     |        TextAlign        | optional |                |
+| animationBuilder  | OKToastAnimationBuilder | optional |                |
+| animationDuration |        Duration         | optional |                |
+|  animationCurve   |          Curve          | optional |                |
 
 ### Method `showToastWidget`
 
 Display custom widgets on toast
 
-param see showToast
-
-|       name        |     type      |   need   |                             desc                              |
-| :---------------: | :-----------: | :------: | :-----------------------------------------------------------: |
-|      widget       |    Widget     | required |                The widget you want to display.                |
-|      context      | BuildContext  | optional |                                                               |
-|     duration      |   Duration    | optional |                                                               |
-|     position      | ToastPosition | optional |                                                               |
-|     onDismiss     |   Function    | optional |                                                               |
-| dismissOtherToast |     bool      | optional |                                                               |
-|   textDirection   | TextDirection | optional |                                                               |
-|    handleTouch    |     bool      | optional | Default is false, if it's true, can responed use touch event. |
+Description of params see `showToast`.
+
+|       name        |          type           |   need   |              desc               |
+| :---------------: | :---------------------: | :------: | :-----------------------------: |
+|      widget       |         Widget          | required | The widget you want to display. |
+|      context      |      BuildContext       | optional |                                 |
+|     duration      |        Duration         | optional |                                 |
+|     position      |      ToastPosition      | optional |                                 |
+|     onDismiss     |        Function         | optional |                                 |
+| dismissOtherToast |          bool           | optional |                                 |
+|   textDirection   |      TextDirection      | optional |                                 |
+|    handleTouch    |          bool           | optional |                                 |
+| animationBuilder  | OKToastAnimationBuilder | optional |                                 |
+| animationDuration |        Duration         | optional |                                 |
+|  animationCurve   |          Curve          | optional |                                 |
 
 ### Method `dismissAllToast`
 
-dismiss all toast
+Dismiss all toast.
 
 ### Return value of `showToast` and `showToastWidget`
 
@@ -284,3 +295,11 @@ class _MyHomePageState extends State<MyHomePage> {
 
 
 ```
+
+## CHANGELOG
+
+[Link](https://github.com/OpenFlutter/flutter_oktoast/blob/master/CHANGELOG.md)
+
+## LICENSE
+
+[Apache-2.0](https://github.com/OpenFlutter/flutter_oktoast/blob/master/LICENSE)

example/lib/main.dart

@@ -20,6 +20,9 @@ class MyApp extends StatelessWidget {
         ),
         home: MyHomePage(),
       ),
+      animationCurve: Curves.easeIn,
+      animationBuilder: Miui10AnimBuilder(),
+      animationDuration: Duration(milliseconds: 200),
     );
   }
 }
@@ -49,6 +52,7 @@ class _MyHomePageState extends State<MyHomePage> {
       backgroundColor: Colors.black.withOpacity(0.8),
       radius: 13.0,
       textStyle: TextStyle(fontSize: 18.0),
+      animationBuilder: Miui10AnimBuilder(),
     );
 
     showToast(

example/pubspec.lock

@@ -66,7 +66,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.2.1"
+    version: "2.3.0"
   path:
     dependency: transitive
     description:

lib/oktoast.dart

@@ -4,3 +4,7 @@ export 'src/core/toast.dart'
     show showToast, showToastWidget, OKToast, ToastFuture, dismissAllToast;
 
 export 'src/core/position.dart';
+export 'src/widget/animation/animation_builder.dart';
+export 'src/widget/animation/opacity_builder.dart';
+export 'src/widget/animation/offset_builder.dart';
+export 'src/widget/animation/miui10_anim.dart';

lib/src/core/toast.dart

@@ -5,23 +5,24 @@ import 'dart:collection';
 import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:oktoast/oktoast.dart';
 
 import 'position.dart';
 import 'toast_manager.dart';
 
 part 'toast_future.dart';
+
 part '../widget/theme.dart';
+
 part '../widget/oktoast.dart';
+
 part '../widget/container.dart';
 
 LinkedHashMap<_OKToastState, BuildContext> _contextMap = LinkedHashMap();
 const _defaultDuration = Duration(
   milliseconds: 2300,
 );
 
-const _opacityDuration = Duration(milliseconds: 250);
-
 /// show toast with [msg],
 ToastFuture showToast(
   String msg, {
@@ -36,6 +37,9 @@ ToastFuture showToast(
   TextDirection textDirection,
   bool dismissOtherToast,
   TextAlign textAlign,
+  OKToastAnimationBuilder animationBuilder,
+  Duration animationDuration,
+  Curve animationCurve,
 }) {
   context ??= _contextMap.values.first;
 
@@ -69,12 +73,14 @@ ToastFuture showToast(
 
   return showToastWidget(
     widget,
+    animationBuilder: animationBuilder,
     context: context,
     duration: duration,
     onDismiss: onDismiss,
     position: position,
     dismissOtherToast: dismissOtherToast,
     textDirection: textDirection,
+    animationCurve: animationCurve,
   );
 }
 
@@ -88,20 +94,25 @@ ToastFuture showToastWidget(
   bool dismissOtherToast,
   TextDirection textDirection,
   bool handleTouch,
+  OKToastAnimationBuilder animationBuilder,
+  Duration animationDuration,
+  Curve animationCurve,
 }) {
   context ??= _contextMap.values.first;
   OverlayEntry entry;
   ToastFuture future;
-  position ??= _ToastTheme.of(context).position;
+  final theme = _ToastTheme.of(context);
 
-  handleTouch ??= _ToastTheme.of(context).handleTouch;
+  position ??= theme.position;
+  handleTouch ??= theme.handleTouch;
+  animationBuilder ??= theme.animationBuilder;
+  animationDuration ??=
+      theme.animationDuration ?? const Duration(milliseconds: 250);
+  animationCurve ??= theme.animationCurve ?? Curves.easeIn;
 
-  var movingOnWindowChange =
-      _ToastTheme.of(context)?.movingOnWindowChange ?? false;
+  final movingOnWindowChange = theme?.movingOnWindowChange ?? false;
 
-  var direction = textDirection ??
-      _ToastTheme.of(context).textDirection ??
-      TextDirection.ltr;
+  final direction = textDirection ?? theme.textDirection ?? TextDirection.ltr;
 
   GlobalKey<__ToastContainerState> key = GlobalKey();
 
@@ -113,26 +124,29 @@ ToastFuture showToastWidget(
   entry = OverlayEntry(builder: (ctx) {
     return IgnorePointer(
       ignoring: !handleTouch,
-      child: _ToastContainer(
-        duration: duration,
-        position: position,
-        movingOnWindowChange: movingOnWindowChange,
-        key: key,
-        child: Directionality(
-          textDirection: direction,
+      child: Directionality(
+        textDirection: direction,
+        child: _ToastContainer(
+          duration: duration,
+          position: position,
+          movingOnWindowChange: movingOnWindowChange,
+          key: key,
           child: widget,
+          animationBuilder: animationBuilder,
+          animationDuration: animationDuration,
+          animationCurve: animationCurve,
         ),
       ),
     );
   });
 
-  dismissOtherToast ??= _ToastTheme.of(context).dismissOtherOnShow ?? false;
+  dismissOtherToast ??= theme.dismissOtherOnShow ?? false;
 
   if (dismissOtherToast == true) {
     ToastManager().dismissAll();
   }
 
-  future = ToastFuture._(entry, onDismiss, key);
+  future = ToastFuture._(entry, onDismiss, key, animationDuration);
 
   Future.delayed(duration, () {
     future.dismiss();

lib/src/core/toast_future.dart

@@ -6,11 +6,13 @@ class ToastFuture {
   final VoidCallback _onDismiss;
   bool _isShow = true;
   final GlobalKey<__ToastContainerState> _containerKey;
+  final Duration animationDuration;
 
   ToastFuture._(
     this._entry,
     this._onDismiss,
     this._containerKey,
+    this.animationDuration,
   );
 
   void dismiss({bool showAnim = false}) {
@@ -23,7 +25,7 @@ class ToastFuture {
 
     if (showAnim) {
       _containerKey.currentState.showDismissAnim();
-      Future.delayed(_opacityDuration, () {
+      Future.delayed(animationDuration, () {
         _entry.remove();
       });
     } else {

lib/src/widget/animation/animation_builder.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/widgets.dart';
+
+typedef Widget OKToastAnimationBuilder(
+  BuildContext context,
+  Widget child,
+  AnimationController controller,
+  double percent,
+);
+
+abstract class BaseAnimationBuilder {
+  BaseAnimationBuilder();
+
+  Widget call(
+    BuildContext context,
+    Widget child,
+    AnimationController controller,
+    double percent,
+  ) {
+    return buildWidget(context, child, controller, percent);
+  }
+
+  Widget buildWidget(BuildContext context, Widget child,
+      AnimationController controller, double percent);
+}

lib/src/widget/animation/miui10_anim.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'dart:math' show min;
+import 'animation_builder.dart';
+
+class Miui10AnimBuilder extends BaseAnimationBuilder {
+  @override
+  Widget buildWidget(
+    BuildContext context,
+    Widget child,
+    AnimationController controller,
+    double percent,
+  ) {
+    final opacity = min(1.0, percent + 0.2);
+    final offset = (1 - percent) * 20;
+
+    return Opacity(
+      opacity: opacity,
+      child: Transform.translate(
+        child: child,
+        offset: Offset(0, offset),
+      ),
+    );
+  }
+}