Flutter开发之——Toast提示框

最新推荐文章于 2025-09-05 09:52:24 发布

原创最新推荐文章于 2025-09-05 09:52:24 发布 · 7.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了Flutter中如何实现类似于Android Toast的功能，借助Fluttertoast库进行简单快捷的操作。通过添加依赖、引入头部文件和调用showToast方法，可以设置显示内容、时长、位置、颜色等属性，实现自定义的提示信息。同时提供了代码示例展示在FloatingActionButton点击时显示Toast的完整过程。

一概述

Toast是Flutter中用于显示信息的弹框
Flutter官方暂时没有类似Android中的Toast，我们可以借助GitHub上别人封装好的类库实现类似的功能

二 fluttertoast介绍

2.1 项目地址

fluttertoast

2.2 如何使用

将依赖添加到pubspec.yaml，并执行Pub get
```
fluttertoast: ^7.1.6
```

将头文件添加到要使用的类中

import 'package:fluttertoast/fluttertoast.dart';

调用Fluttertoast的showToast方法

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

2.3 属性介绍

属性	说明	默认值
msg	显示的内容	非空
toastLength	显示的时间	Toast.LENGTH_SHORT
gravity	显示的位置	ToastGravity.BOTTOM
timeInSecForIosWeb	显示时长(ios & web)	1(s)
backgroundColor	背景色	null
textcolor	文字颜色	null
fontSize	文字大小	null

三示例(在默认项目的floatingActionButton显示Toast)

3.1 代码

floatingActionButton: FloatingActionButton(                             
  onPressed: () => {                                                    
    Fluttertoast.showToast(                                             
        msg: "This is Center Short Toast",                              
        toastLength: Toast.LENGTH_SHORT,                                
        gravity: ToastGravity.CENTER,                                   
        timeInSecForIosWeb: 1,                                          
        backgroundColor: Colors.red,                                    
        textColor: Colors.white,                                        
        fontSize: 18.0),                                                
    //Fluttertoast.cancel()                                             
  },                                                                    
  tooltip: 'Increment',                                                 
  child: Icon(Icons.add),                                               
), // This trailing comma makes auto-formatting nicer for build methods.