Flutter中实现Toast效果(非FlutterToast)

2018-12-19 阅读量

本文主要介绍Flutter中利用Overlay相关内容实现Toast效果，主要实现逻辑参考简书：平静的阿卿达的文章：使用Flutter实现Toast效果以及FlutterToast的部分写法。

1.实现原理

Overlay首先是一个可以浮在整个UI框架上的StatefulWidget，所以其需要借助于OverlayState来更新其状态，利用Overlay.of(context)方法实例化OverlayState后过OverlayEntry构建在Overlay中的需要展示的 view，并通过OverlayState的insert方法将构建的view更新到Overlay中，同时展示在屏幕上，在不需要的时候可以通过OverlayEntry的remove方法移除当前的展示的view。

OverlayState的使用示例：

//获取OverlayState
OverlayState overlayState = Overlay.of(context);
//创建OverlayEntry
OverlayEntry _overlayEntry = OverlayEntry(
    builder: (BuildContext context) => Positioned(
          child: Icon(Icons.check_circle),
        ));
//显示到屏幕上。
overlayState.insert(_overlayEntry);

2.实现效果

下图为gif动态图，加载比较慢

3.封装完成的MyToast代码如下

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';


enum myToastLength { LENGTH_SHORT, LENGTH_LONG }
enum myToastGravity { TOP, BOTTOM, CENTER }

class MyToast {
  String _msg;
  OverlayEntry _overlayEntry; //toast靠它加到屏幕上
  bool _showing = false; //toast是否正在showing
  DateTime _startedTime; //开启一个新toast的当前时间，用于对比是否已经展示了足够时间
  int _length; //控制toast显示时间
  double _position; //控制显示位置
  BuildContext _context;
  Color _backgroundColor;
  Color _textColor;

  MyToast(this._context, this._backgroundColor,this._textColor);

  void showToast({
    @required String msg,
    myToastLength toastLength,
    myToastGravity gravity,
    //int timeInSecForIos = 1,

  }) async {
    assert(msg != null);
    _msg = msg;
    _startedTime = DateTime.now();
    if(toastLength != null){
      toastLength == myToastLength.LENGTH_SHORT ? _length = 1000 : _length = 2000;
    }else{
      _length = 1000;
    }

    if(gravity == null || gravity == myToastGravity.CENTER){
      _position = 1 / 2;
    }else{
      gravity == myToastGravity.TOP ? _position = 1 / 10 : _position = 9 / 10;
    }
    //获取OverlayState
    OverlayState overlayState = Overlay.of(_context);
    double _height = MediaQuery.of(_context).size.height;
    print('当前屏幕高度==>'+_height.toString());
    print('toast所在高度==>'+(_height * _position).toString());
    _showing = true;
    if (_overlayEntry == null) {
      _overlayEntry = OverlayEntry(
          builder: (BuildContext context) =>
              Positioned(
                //top值，可以改变这个值来改变toast在屏幕中的位置
                top: _height * _position,
                child: Container(
                    alignment: Alignment.center,
                    width: MediaQuery.of(context).size.width,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 80.0),
                      child: AnimatedOpacity(
                        opacity: _showing ? 1.0 : 0.0, //目标透明度
                        duration: _showing ? Duration(milliseconds: 100) : Duration(milliseconds: 400),
                        child: _buildToastWidget(_backgroundColor, _textColor),
                      ),
                    )),
              ));
      overlayState.insert(_overlayEntry);
    } else {
      //重新绘制UI，类似setState
      _overlayEntry.markNeedsBuild();
    }
    await Future.delayed(Duration(milliseconds: _length)); //等待两秒

    //2秒后消失
    if (DateTime.now().difference(_startedTime).inMilliseconds >= _length) {
      _showing = false;
      _overlayEntry.markNeedsBuild();
    }

    //_overlayEntry.remove();
  }

  //toast绘制
  _buildToastWidget(Color backgroundColor, Color textColor) {
    return Center(
      child: Card(
        color: backgroundColor,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          child: Text(
            _msg,
            style: TextStyle(
              fontSize: 16.0,
              color: textColor,
            ),
          ),
        ),
      ),
    );
  }

}

4.使用示例

没使用静态方法的形式，因为可能存在需要在同一界面下一个toast弹出在TOP，一个toast弹出在CENTER，这时候需要实例化两个toast，设置不同的gravity属性。两个Color属性其实可以固定，主要控制Context以及时间和位置。

void _showToast(String msg) {
    MyToast myToast = new MyToast(context,Colors.lightBlueAccent,Colors.white);
    myToast.showToast(
        msg: msg,
        toastLength: myToastLength.LENGTH_SHORT,
        gravity: myToastGravity.CENTER
    );
  }

5.总结

由于个人不太喜欢FlutterToast的效果，也没认真研究，就在网上参考了文初提到的那位作者算是另辟蹊径地实现方式，使用起来个人觉得很舒服，就结合了FlutterToast的使用写法封装了一个MyToast，如有更好的实现方案或者文中代码有问题欢迎在评论区分享和指正。