Flutter之使用Overlay建立全局Toast並靜態調用

Toast在Android上是最經常使用的提示組件了，它的優點在於靜態調用、全局顯示，能夠在任意你想要的地方調用他而絲絕不影響界面的佈局，調用簡單程度與Logger的調用不相上下。
然而在Flutter中並無給咱們提供Toast的接口，想要實現Toast的效果有兩種途徑，一種是接Android/iOS原生工程，第二種是不依託於使用Flutter來實現。
本篇選用第二種方案來實現，接原生代碼一方面要求雙端開發工做量和門檻都較大，並且不利於之後的樣式擴展，二是純Flutter實現的Toast確實效果很是好，自定義樣式也很是的方便。使用Flutter相對於RN來講，Flutter的渲染引擎是很是強大的，基本上能用Flutter實現的效果都不建議接原生，而RN則沒有本身的渲染引擎，性能的限制形成RN須要頻繁的接入原生模塊，這也是我傾心Flutter的緣由。

本篇要用的核心組件是Overlay，這個組件提供了動態的在Flutter的渲染樹上插入佈局的特性，從而讓咱們有了在包括路由在內的全部組件的上層插入toast的可能性。

建立Flutter工程

本品系列的Flutter博客都會以建立純淨的Flutter工程開篇，建立工程後，放一個Button在佈局中，便於觸發Toast調用。
代碼：略。

使用Overlay插入Toast佈局

由於咱們要實現全局的靜態調用，因此這裏先建立一個工具類，並在這個類中建立靜態方法show：

class Toast {
	
    static show(BuildContext context, String msg) {
    	//這裏實現toast的彈出邏輯
    }

}
複製代碼

這是一種很常見的靜態調用方式，是須要在你的某個回調中調用Toast.show(context, "你的消息提示");便可完成toast的顯示，而不用考慮佈局嵌套問題。

下面咱們就在show方法中向佈局中插入一個toast：

class Toast {
  static show(BuildContext context, String msg) {
    var overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    overlayEntry = new OverlayEntry(builder: (context) {
      return buildToastLayout(msg);
    });
    overlayState.insert(overlayEntry);
  }

  static LayoutBuilder buildToastLayout(String msg) {
    return LayoutBuilder(builder: (context, constraints) {
      return IgnorePointer(
        ignoring: true,
        child: Container(
          child: Material(
            color: Colors.white.withOpacity(0),
            child: Container(
              child: Container(
                child: Text(
                  "${msg}",
                  style: TextStyle(color: Colors.white),
                ),
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.6),
                  borderRadius: BorderRadius.all(
                    Radius.circular(5),
                  ),
                ),
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
              ),
              margin: EdgeInsets.only(
                bottom: constraints.biggest.height * 0.15,
                left: constraints.biggest.width * 0.2,
                right: constraints.biggest.width * 0.2,
              ),
            ),
          ),
          alignment: Alignment.bottomCenter,
        ),
      );
    });
  }
}

複製代碼

在show方法中使用Overlay插入了一個OverlayEntry，而OverlayEntry負責構建佈局，buildToastLayout方法這是一個正常的佈局構建方法，經過這個方法咱們構建了一個Toast樣式的ToastView，並經過OverlayEntry插入到了整個佈局的最上層。
這時候經過調用Toast.show方法就能在界面上看到一個Toast樣式的提示了。
可是，這個ToastView是不會消失的，它會一直呆在界面上，這顯然不是咱們想要的。

讓Toast自動消失

咱們繼續改造這個Toast，讓它可以自動消失。
建立一個叫作ToastView的類，便於控制每次插入的ToastView：

class ToastView {
  OverlayEntry overlayEntry;
  OverlayState overlayState;
  bool dismissed = false;

  _show() async {
    overlayState.insert(overlayEntry);
    await Future.delayed(Duration(milliseconds: 3500));
    this.dismiss();
  }

  dismiss() async {
    if (dismissed) {
      return;
    }
    this.dismissed = true;
    overlayEntry?.remove();
  }
}
複製代碼

這樣，就把ToastView的顯示和消失的控制封裝起來了。而後在Toast的show方法中對他進行調用

class Toast {
  static show(BuildContext context, String msg) {
    var overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    overlayEntry = new OverlayEntry(builder: (context) {
      return buildToastLayout(msg);
    });
    var toastView = ToastView();
    toastView.overlayState = overlayState;
    toastView.overlayEntry = overlayEntry;
    toastView._show();
  }
  ...
}
複製代碼

經過上面的方法，已經實現了Toast的全局靜態調用，並插入全局佈局，並在顯示3.5秒後自動消失的Toast，可是這個toast好像怪怪的，沒錯，他沒有動畫，下面來給這個toast增長動畫。

給Toast增長動畫

這個Toast的動畫算是Flutter的高級應用了，它涉及到了縮放，位移，自定義差值器，AnimatedBuilder等特性，本篇的核心在介紹Overlay的使用和ToastView的封裝，關於動畫的使用若是在這裏講就發散的太多了，篇幅限制之後單獨來說動畫吧，這裏以你對動畫系統瞭解的前提來說解。

class Toast {
  static show(BuildContext context, String msg) {
    var overlayState = Overlay.of(context);
    var controllerShowAnim = new AnimationController(
      vsync: overlayState,
      duration: Duration(milliseconds: 250),
    );
    var controllerShowOffset = new AnimationController(
      vsync: overlayState,
      duration: Duration(milliseconds: 350),
    );
    var controllerHide = new AnimationController(
      vsync: overlayState,
      duration: Duration(milliseconds: 250),
    );
    var opacityAnim1 =
        new Tween(begin: 0.0, end: 1.0).animate(controllerShowAnim);
    var controllerCurvedShowOffset = new CurvedAnimation(
        parent: controllerShowOffset, curve: _BounceOutCurve._());
    var offsetAnim =
        new Tween(begin: 30.0, end: 0.0).animate(controllerCurvedShowOffset);
    var opacityAnim2 = new Tween(begin: 1.0, end: 0.0).animate(controllerHide);

    OverlayEntry overlayEntry;
    overlayEntry = new OverlayEntry(builder: (context) {
      return ToastWidget(
        opacityAnim1: opacityAnim1,
        opacityAnim2: opacityAnim2,
        offsetAnim: offsetAnim,
        child: buildToastLayout(msg),
      );
    });
    var toastView = ToastView();
    toastView.overlayEntry = overlayEntry;
    toastView.controllerShowAnim = controllerShowAnim;
    toastView.controllerShowOffset = controllerShowOffset;
    toastView.controllerHide = controllerHide;
    toastView.overlayState = overlayState;
    preToast = toastView;
    toastView._show();
  }
  ...
}

class ToastView {
  OverlayEntry overlayEntry;
  AnimationController controllerShowAnim;
  AnimationController controllerShowOffset;
  AnimationController controllerHide;
  OverlayState overlayState;
  bool dismissed = false;

  _show() async {
    overlayState.insert(overlayEntry);
    controllerShowAnim.forward();
    controllerShowOffset.forward();
    await Future.delayed(Duration(milliseconds: 3500));
    this.dismiss();
  }

  dismiss() async {
    if (dismissed) {
      return;
    }
    this.dismissed = true;
    controllerHide.forward();
    await Future.delayed(Duration(milliseconds: 250));
    overlayEntry?.remove();
  }
}

class ToastWidget extends StatelessWidget {
  final Widget child;
  final Animation<double> opacityAnim1;
  final Animation<double> opacityAnim2;
  final Animation<double> offsetAnim;

  ToastWidget(
      {this.child, this.offsetAnim, this.opacityAnim1, this.opacityAnim2});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: opacityAnim1,
      child: child,
      builder: (context, child_to_build) {
        return Opacity(
          opacity: opacityAnim1.value,
          child: AnimatedBuilder(
            animation: offsetAnim,
            builder: (context, _) {
              return Transform.translate(
                offset: Offset(0, offsetAnim.value),
                child: AnimatedBuilder(
                  animation: opacityAnim2,
                  builder: (context, _) {
                    return Opacity(
                      opacity: opacityAnim2.value,
                      child: child_to_build,
                    );
                  },
                ),
              );
            },
          ),
        );
      },
    );
  }
}

class _BounceOutCurve extends Curve {
  const _BounceOutCurve._();

  @override
  double transform(double t) {
    t -= 1.0;
    return t * t * ((2 + 1) * t + 2) + 1.0;
  }
}

複製代碼

這是段很是長的代碼，原本是不想往上面貼這麼多代碼的，可是動畫這塊兒講的話篇幅又太長，不貼代碼的話講起來又太空洞，只能貼了，大概說一下。
上面代碼分爲四段：
第一段，在show方法中建立3個動畫，Toast顯示的位移和漸顯動畫，Toast消失的漸隱動畫，而後把這三個動畫的controller交給ToastView來控制動畫播放。
第二段，在ToastView中接收三個動畫controller，並在show和dismiss方法中控制動畫的播放。
第三段，建立一個自定義Widget，並使用三個AnimatedBuilder來實現動畫，並在show方法中把Toast的佈局包裹起來。
第四段，定義了一個動畫差值器，Flutter中提供了不少動畫差值器，可是並無咱們須要的，因此這裏定義一個彈跳一次後回彈的動畫差值器用來控制ToastView的偏移動畫效果。

到目前爲止，這個Toast已經知足了最基本的樣式，全局調用，動畫彈出，延遲3.5秒後自動漸隱消失。

防止連續調用形成toast堆疊

可是還存在一個問題，由於Toast的樣式的半透明的黑色，若是連續調用屢次的話，會有多個Toast同時彈出，並堆疊在一塊兒，會顯得很是的黑。

下面再作一個處理，在show以前，判斷是否已經有一個Toast在顯示了，若是有，即刻把它dismiss了。

static ToastView preToast;

  static show(BuildContext context, String msg) {
    preToast?.dismiss();
    preToast = null;
	...
    preToast = toastView;
    toastView._show();
  }
  ...
}

複製代碼

這樣就能夠了，?.操做符和kotlin的效果是同樣的，空指針安全，很舒服。

---

更多幹貨移步個人我的博客 www.nightfarmer.top/