「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。

本文翻译自pub： fluttertoast | Flutter Package (flutter-io.cn)

译时版本： fluttertoast 8.0.8

---

fluttertoast

Flutter 的消息框（吐司）库。

该库支持两种类型的吐司消息框，一种需要 BuildContext ，另一种不带 BuildContext 。

不带 context 的吐司消息框

支持的平台

• Android
• IOS
• Web (使用 Toastify-JS)

这种方式有些局限，也不能对 UI 进行控制。

带 BuildContext 的吐司消息框

支持的平台

• 所有平台

1. 可对吐司消息框完全控制
2. 吐司消息框是队列化的
3. 可移除一个吐司消息框
4. 可清空吐司消息框队列

如何使用

# 添加该行到依赖中
fluttertoast: ^8.0.8

import 'package:fluttertoast/fluttertoast.dart';

在 Android 和 iOS 上使用不带 Build Context  的吐司消息框

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

属性	描述	默认
msg	String (非空)(必需)	必需
toastLength	Toast.LENGTH_SHORT 或 Toast.LENGTH_LONG (可选项)	Toast.LENGTH_SHORT
gravity	ToastGravity.TOP (或) ToastGravity.CENTER (或) ToastGravity.BOTTOM (在Web上只支持顶部和底部)	ToastGravity.BOTTOM
timeInSecForIosWeb	int (支持 iOS 和 WEB )	1 (秒)
backgroundColor	Colors.red	null
textcolor	Colors.white	null
fontSize	16.0 (float)	null
webShowClose	false (bool)	false
webBgColor	String (16进制颜色值)	线性渐变(从左向右, #00b09b, #96c93d)
webPosition	String ( left、 center、 或 right )	right

取消所有的吐司消息框调用

Fluttertoast.cancel()

Android 上的注意事项

public void setView(View view)

该方法在 API level 30 里已经过时。 自定义吐司视图已经过时。应用可以使用 makeText(android.content.Context, java.lang.CharSequence, int) 方法创建一个标准的文本吐司，或者在前景中使用 Snackbar。 从 Android Build.VERSION_CODES#R 开始，目标用于 API level Build.VERSION_CODES#R 或者更高版本的应用在后台时不会有自定义的吐司视图显示。

自定义吐司在 Android11 或更高版本中不能正常使用，它只使用 msg 和 toastLength 属性，其它的属性会被忽略。

用于 Android 的自定义吐司

在工程的 app/res/layout 目录下创建 toast_custom.xml 文件用以自定义样式。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginStart="50dp"
    android:background="@drawable/corner"
    android:layout_marginEnd="50dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CC000000"
        android:paddingStart="16dp"
        android:paddingTop="10dp"
        android:paddingEnd="16dp"
        android:paddingBottom="10dp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        tools:text="Toast should be short." />
</FrameLayout>

带 BuildContext 的吐司消息框（所有平台）

FToast fToast;

@override
void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
}

_showToast() {
    Widget toast = Container(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.greenAccent,
        ),
        child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
            Icon(Icons.check),
            SizedBox(
            width: 12.0,
            ),
            Text("This is a Custom Toast"),
        ],
        ),
    );


    fToast.showToast(
        child: toast,
        gravity: ToastGravity.BOTTOM,
        toastDuration: Duration(seconds: 2),
    );
    
    // Custom Toast Position
    fToast.showToast(
        child: toast,
        toastDuration: Duration(seconds: 2),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 16.0,
            left: 16.0,
          );
        });
}

现在调用 _showToast()

更多详细内容参考 example 工程

属性	描述	默认
child	组件 (非空)(必需)	必需
toastDuration	时长 (可选)
gravity	ToastGravity.*

取消所有的吐司消息框调用

// 移除当前显示中的吐司
fToast.removeCustomToast()

// 清空队列
fToast.removeQueuedCustomToasts();

预览图像（不带 BuildContext）

预览图像（带 BuildContext）

如果需要任意特性建议

...

在 iOS 上需要帮助

正在召集可以检出代码并修改 iOS 相关 issue 的 iOS 开始者（我没有 Mac 也没有 iOS 设备）

赞助杯咖啡

---