快捷導(dǎo)航

flutter Toast實(shí)現(xiàn)消息提示框

更新時(shí)間：2021年08月23日 14:01:39 作者：早起的年輕人

這篇文章主要為大家詳細(xì)介紹了flutter Toast實(shí)現(xiàn)消息提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了flutter Toast實(shí)現(xiàn)消息提示框的具體代碼，供大家參考，具體內(nèi)容如下

使用方法

//默認(rèn)是顯示在中間的
Toast.toast(context,msg: "中間顯示的 ");     
 Toast.toast(context,msg: "中間顯示的 ",position: ToastPostion.center);
Toast.toast(context,msg: "頂部顯示的 Toast $_count",position: ToastPostion.top);
Toast.toast(context,msg: "底部顯示的 Toast $_count",position: ToastPostion.bottom);

Toast 源碼

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

//Toast 顯示位置控制 
enum ToastPostion {
 top,
 center,
 bottom,
}

class Toast {
 // toast靠它加到屏幕上
 static OverlayEntry _overlayEntry;
 // toast是否正在showing
 static bool _showing = false;
 // 開啟一個(gè)新toast的當(dāng)前時(shí)間，用于對(duì)比是否已經(jīng)展示了足夠時(shí)間
 static DateTime _startedTime;
 // 提示內(nèi)容
 static String _msg;
 // toast顯示時(shí)間
 static int _showTime;
 // 背景顏色
 static Color _bgColor;
 // 文本顏色
 static Color _textColor;
 // 文字大小
 static double _textSize;
 // 顯示位置
 static ToastPostion _toastPosition;
 // 左右邊距
 static double _pdHorizontal;
 // 上下邊距
 static double _pdVertical;
 static void toast(
  BuildContext context, {
  //顯示的文本
  String msg,
  //顯示的時(shí)間 單位毫秒
  int showTime = 1000,
  //顯示的背景
  Color bgColor = Colors.black,
  //顯示的文本顏色
  Color textColor = Colors.white,
  //顯示的文字大小
  double textSize = 14.0,
  //顯示的位置
  ToastPostion position = ToastPostion.center,
  //文字水平方向的內(nèi)邊距
  double pdHorizontal = 20.0,
  //文字垂直方向的內(nèi)邊距
  double pdVertical = 10.0,
 }) async {
  assert(msg != null);
  _msg = msg;
  _startedTime = DateTime.now();
  _showTime = showTime;
  _bgColor = bgColor;
  _textColor = textColor;
  _textSize = textSize;
  _toastPosition = position;
  _pdHorizontal = pdHorizontal;
  _pdVertical = pdVertical;
  //獲取OverlayState
  OverlayState overlayState = Overlay.of(context);
  _showing = true;
  if (_overlayEntry == null) {
   //OverlayEntry負(fù)責(zé)構(gòu)建布局
   //通過OverlayEntry將構(gòu)建的布局插入到整個(gè)布局的最上層
   _overlayEntry = OverlayEntry(
     builder: (BuildContext context) => Positioned(
        //top值，可以改變這個(gè)值來改變toast在屏幕中的位置
        top: buildToastPosition(context),
        child: Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width,
          child: Padding(
           padding: EdgeInsets.symmetric(horizontal: 40.0),
           child: AnimatedOpacity(
            opacity: _showing ? 1.0 : 0.0, //目標(biāo)透明度
            duration: _showing
              ? Duration(milliseconds: 100)
              : Duration(milliseconds: 400),
            child: _buildToastWidget(),
           ),
          )),
       ));
   //插入到整個(gè)布局的最上層
   overlayState.insert(_overlayEntry);
  } else {
   //重新繪制UI，類似setState
   _overlayEntry.markNeedsBuild();
  }
  // 等待時(shí)間
  await Future.delayed(Duration(milliseconds: _showTime));
  //2秒后 到底消失不消失
  if (DateTime.now().difference(_startedTime).inMilliseconds >= _showTime) {
   _showing = false;
   _overlayEntry.markNeedsBuild();
   await Future.delayed(Duration(milliseconds: 400));
   _overlayEntry.remove();
   _overlayEntry = null;
  }
 }

 //toast繪制
 static _buildToastWidget() {
  return Center(
   child: Card(
    color: _bgColor,
    child: Padding(
     padding: EdgeInsets.symmetric(
       horizontal: _pdHorizontal, vertical: _pdVertical),
     child: Text(
      _msg,
      style: TextStyle(
       fontSize: _textSize,
       color: _textColor,
      ),
     ),
    ),
   ),
  );
 }

// 設(shè)置toast位置
 static buildToastPosition(context) {
  var backResult;
  if (_toastPosition == ToastPostion.top) {
   backResult = MediaQuery.of(context).size.height * 1 / 4;
  } else if (_toastPosition == ToastPostion.center) {
   backResult = MediaQuery.of(context).size.height * 2 / 5;
  } else {
   backResult = MediaQuery.of(context).size.height * 3 / 4;
  }
  return backResult;
 }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: