Flutter Toast的使用

站长

2023年09月21日 05:12 · 阅读数 18

从app界面想谈一个小小的提示给用户是一个经常性的需求，当我们在开发安卓应用的时候会使用Toast类来进行提示。那么在flutter中有没有类似的小部件能帮我们完成类似需求呢？本文接下来会介绍两种在flutter给用户弹出提示的方式。

来自Material Design的官方Toast，Snackbars

在执行某些操作的时候，给用户一些简短的通知可能会很有用。例如当用户从列表中删掉一条消息时，您可能想通知他该消息已经删除了，甚至我们的程序可以提供给用户一个撤销的操作。

在Material Design中，SnackBar可以给我们提供此项功能。要在flutter中使用Snackbar我们可以按照下面步骤。

创建一个Scaffold

创建遵循Material Design准则的应用程序时，请为您的应用程序提供一致的外观结构。在此例子中，Snackbar在屏幕底部显示，并且不与其他重要小部件(FloatingActionButton)重叠

Scaffold来自Material Design的小部件创建了这种视觉结构，病确保重要的窗口小组件不会重叠。

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // Complete this code in the next step.
);

显示一个SnackBar

创建好了Scaffold，显示SnackBar时首先我们要创建一个SnackBar，然后使用ScaffoldMessenger显示它。

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
// 从组件树种找到ScaffoldMessager，并用它去show一个snackBar
ScaffoldMessenger.of(context).showSnackBar(snackBar);

给SnackBar提供一个可选操作

当显示SnackBar时，我们可能想要向用户提供一个操作。例如，如果用户不小心删除了一条消息，则他们可以在SnackBar中使用可选的动作来恢复该消息。

下面展示如何在SnackBar给用户提供可选操作。

final snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // 我们只需要在此处处理用户需要撤销的操作就行了。
    },
  ),
);

来自第三方库的依赖，fluttertoast

fluttertoast是一个来自第三方库的给用户弹出toast提示的实现，它覆盖了安卓，IOS，及web等平台。它内部提供了两种方显示toast的方式，让我们可以在flutter中轻松的弹出toast。

fluttertoast的使用

1.利用channel显示各个原生平台toast

添加下列代码到你的依赖配置

fluttertoast: ^8.0.6

在使用的地方导入相应的dart库文件

import 'package:fluttertoast/fluttertoast.dart';

弹出Toast

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
    );

取消Toast

Fluttertoast.cancel()

Toast显示的配置 |属性|描述|默认| |-|-|-| |msg|String类型|必须| |toastLength|Toast.TENGTH_SHORT 或者 Toast.LENGTH_LONG|Toast.TENGTH_SHORT| |gravity|ToastGravity.TOP 或者 ToastGravity.CENTER 或者 ToastGravity.BOTTOM web只支持top and bottom|ToastGravity.BOTTOM| |timeInSecForIosWeb|int (ios 和 web)的配置|1(sec)| |backgroundColor|Colors.red|null| |textcolor|Colors.white|null| |fontSize|16.0(float)|null| |webShowClose|false(bool)|false| |webBgColor|String(hex Color)|linear-gradient(to right, #00b09b, #96c93d)| |webPosition|String(left,center,right)|right|

flutter平台实现的toast

FToast 是作者在flutter平台实现的toast，他不依赖原生操作系统直接在flutterview层面显示toast，所以用此方式实现的toast所有平台都通用。

FToast使用由于FToast使用起来比较简单，我们这里直接上demo

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,
          );
        });
}

关键代码

//1. 在initState中初始化
@override
void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
}
//2. 在合适的地方调用_showToast()方法
_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,
          );
        });
}

FToast的取消

// To remove present shwoing toast
fToast.removeCustomToast()

// To clear the queue
fToast.removeQueuedCustomToasts();