Flutter Toast也称为Toast通知消息。这是一条很小的消息,主要在设备屏幕的底部弹出。
在本节中,无涯教程将学习如何在Flutter中实现如何在android和iOS中显示Toast消息。要实现Toast通知,无涯教程需要在Flutter中导入fluttertoast库。
Flutter为用户提供了一些属性,以显示Toast消息,如下所示:属性 | 描述 |
---|---|
msg | 字符串(必填) |
toastlength | Toast.LENGTH_SHORT or Toast.LENGTH_LONG |
gravity | ToastGravity.TOP or ToastGravity.CENTER or ToastGravity.BOTTOM |
timeInSecForIos | 它仅用于iOS(1秒或更多) |
backgroundColor | 它指定背景颜色。 |
textColor | 它指定文本颜色。 |
fontSize | 它指定通知消息的字体大小。 |
FluntToast.cancel() - 当您要取消所有向用户显示消息的请求时,将使用该函数。
让无涯教程看看如何通过以下步骤在Flutter应用中显示Toast通知:
步骤1:在IDE中创建一个Flutter项目。在这里,无涯教程将使用Android Studio。
步骤2:在Android Studio中打开项目,然后导航到lib文件夹。在此文件夹中,打开pubspec.yaml文件。在这里,无涯教程需要在dependency部分中添加flutter toast库,然后单击get package链接以将库导入到main.dart文件中。
pubspec.yaml
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 fluttertoast: ^3.1.0
它确保在添加依赖项时,您在fluttertoast依赖项的左侧保留了两个空格。 fluttertoast依赖项提供了以简单的方式显示敬酒通知的函数。它还可以非常轻松地自定义Toast弹出窗口的外观。
步骤3:打开main.dart文件,然后在窗口小部件中创建Toast通知,如下所示。
Fluttertoast.showToast( msg: 'This is toast notification', toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.BOTTOM, timeInSecForIos: 1, backgroundColor: Colors.red, textColor: Colors.yellow );
让无涯教程查看上述步骤的完整代码。打开main.dart文件并替换以下代码。此代码包含一个按钮,当无涯教程按下此时,它将通过调用 FlutterToast.showToast 来显示Toast消息。
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; class ToastExample extends StatefulWidget { @override _ToastExampleState createState() { return _ToastExampleState(); } } class _ToastExampleState extends State { void showToast() { Fluttertoast.showToast( msg: 'This is toast notification', toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.BOTTOM, timeInSecForIos: 1, backgroundColor: Colors.red, textColor: Colors.yellow ); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Toast Notification Example', home: Scaffold( appBar: AppBar( title: Text('Toast Notification Example'), ), body: Padding( padding: EdgeInsets.all(15.0), child: Center( child: RaisedButton( child: Text('click to show'), onPressed: showToast, ), ), ) ), ); } } void main() => runApp(ToastExample());
现在,在Android Studio中运行应用程序。它将提供以下屏幕。
当无涯教程点击"click to show"按钮时,无涯教程可以在屏幕底部看到Toast消息。请参阅以下图片:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)