Flutter 使用OverlayEntry实现Toast

记录一次关于实现Flutter的tosat消息提示框

设定传入参数

首先，toast需要两个基本参数，BuildContext和String，
BuildContext为上下文，String为需要现实的文字信息
若是需要自定义字体或者消息框样式，可以设置TextStyle或Container等其他组件作为参数传入进来，至于toast的显示时间，可以设置一个默认的Duration值为3000毫秒，再定义两个静态时间数值，这样调用方法的时候可以选择显示的时间 

  static const Duration lengthShort = Duration(milliseconds: 2000);
  static const Duration lengthLong = Duration(milliseconds: 3000);

  BuildContext _context; //上下文
  String _text; //显示的文字
  Duration _duration; //持续的时长

  Toast._(this._context, this._text, this._duration);

  factory Toast.makeText(BuildContext context, String text,
      {Duration duration = lengthLong}) {
    return Toast._(context, text, duration);
  }

自定义消息提示框组件代码

OverlayEntry _buildBody() {
    return OverlayEntry(builder: (context) {
      Size size = MediaQuery.of(context).size;
      return Align(
          alignment: Alignment(0, 0.85),
          child: Material(
            color: Colors.transparent,
            child: Container(
              alignment: Alignment.center,
              width: size.width * 0.8,
              height: 45,
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),
                decoration: BoxDecoration(
                    color: Color(0xff515151),
                    borderRadius: BorderRadius.circular(10)
                ),
                child: Text(_text,
                  style: TextStyle(fontSize: 15, color: Colors.white),
                ),
              ),
            ),
          ));
    });
  }

显示toast

定义一个show方法，调用Overlay的insert方法将上面自定义的OverlayEnty组件使用Future.delayed异步显示出来，过了设定的时间，就自动将该组件给删除

  show() {
    OverlayEntry entry = _buildBody();
    Overlay.of(_context)?.insert(entry);
    Future.delayed(_duration, () {
      entry.remove();
    });
  }

完整代码

import 'package:flutter/material.dart';

/**
 * 自定义Toast
 */
class Toast {
  static const Duration lengthShort = Duration(milliseconds: 2000);
  static const Duration lengthLong = Duration(milliseconds: 3000);

  BuildContext _context; //上下文
  String _text; //显示的文本
  Duration _duration; //持续的时长

  Toast._(this._context, this._text, this._duration);

  factory Toast.makeText(BuildContext context, String text,
      {Duration duration = lengthLong}) {
    return Toast._(context, text, duration);
  }

  show() {
    OverlayEntry entry = _buildBody();
    Overlay.of(_context)?.insert(entry);
    Future.delayed(_duration, () {
      entry.remove();
    });
  }

  OverlayEntry _buildBody() {
    return OverlayEntry(builder: (context) {
      Size size = MediaQuery.of(context).size;
      return Align(
          alignment: Alignment(0, 0.85),
          child: Material(
            color: Colors.transparent,
            child: Container(
              alignment: Alignment.center,
              width: size.width * 0.8,
              height: 45,
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),
                decoration: BoxDecoration(
                    color: Color(0xff515151),
                    borderRadius: BorderRadius.circular(10)
                ),
                child: Text(_text,
                  style: TextStyle(fontSize: 15, color: Colors.white),
                ),
              ),
            ),
          ));
    });
  }
}

调用Toast

既然已经实现了，当然要调用一下看看是否能够真的显示出消息提示框的效果(使用前记得导入该文件)
，这里我在一个登录按钮的点击事件内进行调用，调用方法很简单：

onTap() {
    Toast.makeText(context,"登录成功!").show();
}

显示成功