Flutter - Toast

Flutter - Toast 首页 / Flutter入门教程 / Flutter - Toast

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中运行应用程序。它将提供以下屏幕。

Flutter Toast Notification

当无涯教程点击"click to show"按钮时,无涯教程可以在屏幕底部看到Toast消息。请参阅以下图片:

Flutter Toast Notification

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

代码精进之路 -〔范学雷〕

Flutter核心技术与实战 -〔陈航〕

Service Mesh实战 -〔马若飞〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

正则表达式入门课 -〔涂伟忠〕

Vim 实用技巧必知必会 -〔吴咏炜〕

如何落地业务建模 -〔徐昊〕

说透元宇宙 -〔方军〕

好记忆不如烂笔头。留下您的足迹吧 :)