Flutter toast弹窗实现

最新推荐文章于 2024-08-13 08:32:23 发布
最新推荐文章于 2024-08-13 08:32:23 发布
阅读量2.3k 收藏 4
点赞数 1
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j086924/article/details/122176013
版权

一.Flutter toast库配置,可参考fluttertoast配置引用

1.在pubspec.yaml中配置fluttertoast库，通过Pub get 获取fluttertoast的版本，通过Pub upgrade更新，eg:

 # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^5.0.0
  fluttertoast: ^8.0.8

2.在需要显示toast的dart文件中，import fluttertoast.dart,eg:

import 'package:fluttertoast/fluttertoast.dart';

3.fluttertoast.dart源码查看

/// Summons the platform's showToast which will display the message
  ///
  /// Wraps the platform's native Toast for android.
  /// Wraps the Plugin https://github.com/scalessec/Toast for iOS
  /// Wraps the https://github.com/apvarun/toastify-js for Web
  ///
  /// Parameter [msg] is required and all remaining are optional
  static Future<bool?> showToast({
    required String msg,
    Toast? toastLength,
    int timeInSecForIosWeb = 1,
    double? fontSize,
    ToastGravity? gravity,
    Color? backgroundColor,
    Color? textColor,
    bool webShowClose = false,
    webBgColor: "linear-gradient(to right, #00b09b, #96c93d)",
    webPosition: "right",
  }) async {
    String toast = "short";
    if (toastLength == Toast.LENGTH_LONG) {
      toast = "long";
    }

    String gravityToast = "bottom";
    if (gravity == ToastGravity.TOP) {
      gravityToast = "top";
    } else if (gravity == ToastGravity.CENTER) {
      gravityToast = "center";
    } else {
      gravityToast = "bottom";
    }

//lines from 78 to 97 have been changed in order to solve issue #328
    if (backgroundColor == null) {
      backgroundColor = Colors.black;
    }
    if (textColor == null) {
      textColor = Colors.white;
    }
    final Map<String, dynamic> params = <String, dynamic>{
      'msg': msg,
      'length': toast,
      'time': timeInSecForIosWeb,
      'gravity': gravityToast,
      'bgcolor': backgroundColor != null ? backgroundColor.value : null,
      'iosBgcolor': backgroundColor != null ? backgroundColor.value : null,
      'textcolor': textColor != null ? textColor.value : null,
      'iosTextcolor': textColor != null ? textColor.value : null,
      'fontSize': fontSize,
      'webShowClose': webShowClose,
      'webBgColor': webBgColor,
      'webPosition': webPosition
    };

    bool? res = await _channel.invokeMethod('showToast', params);
    return res;
  }
}

1).默认值设置，eg:

propertydescriptiondefault
msgString (Not Null)(required)required
toastLengthToast.LENGTH_SHORT or Toast.LENGTH_LONG (optional)Toast.LENGTH_SHORT
gravityToastGravity.TOP (or) ToastGravity.CENTER (or) ToastGravity.BOTTOM (Web Only supports top, bottom)ToastGravity.BOTTOM
timeInSecForIosWebint (for ios & web)1 (sec)
backgroundColorColors.rednull
textcolorColors.whitenull
fontSize16.0 (float)null
webShowClosefalse (bool)false
webBgColorString (hex Color)linear-gradient(to right, #00b09b, #96c93d)
webPositionString (left, center or right)right

4.在需要显示toast的dart文件中调用showToast()方法，eg:

Fluttertoast.showToast(
            msg: "Dividend cannot be zero",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 1,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 18.0
        );

5.取消toast，可调用 cancel()，eg:

Fluttertoast.cancel()

二.自定义fluttertoast

1.定义FToast字段,eg:

FToast fToast;

2.初始化定义的FToast，eg:

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

3.定义FToast显示的方法,包括内容,布局,和显示时长，eg:

_showToast() {
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
      alignment: Alignment.center,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          SizedBox(
            width: 50.0,
          ),
          Text(
            "Dividend cannot be zero",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.black,
              backgroundColor: Colors.white,
              fontSize: 18,
            ),
          )
        ],
      ),
    );


    fToast.showToast(
      child: toast,
      gravity: ToastGravity.BOTTOM,
      toastDuration: const Duration(seconds: 1),
    );

    // Custom Toast Position
    fToast.showToast(
        child: toast,
        toastDuration: const Duration(seconds: 3),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 15.0,
            left: 15.0,
          );
        });
  }

4.调用，可在需要显示toast的地方直接调用_showToast()方法即可，eg:计算器简单实现中添加被除数不能为零的toast

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

// ignore: camel_case_types
class calculatePage extends StatefulWidget {

  const calculatePage({Key? key}) : super(key: key);

  @override
  State createState() => calculatePageState();

}

// ignore: camel_case_types
class calculatePageState extends State<calculatePage> {
  var num1 = 0, num2 = 0, sum = 0;
  late FToast fToast;

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

  final TextEditingController text1 = TextEditingController(text: "0");
  final TextEditingController text2 = TextEditingController(text: "0");

  void doAddition() {
    setState(() {
      print("doAddition---begin");
      num1 = int.parse(text1.text);
      num2 = int.parse(text2.text);
      sum = num1 + num2;
    });
  }

  void doSub() {
    setState(() {
      // ignore: avoid_print
      print("doSub---begin");
      num1 = int.parse(text1.text);
      num2 = int.parse(text2.text);
      sum = num1 - num2;
    });
  }

  void doMul() {
    setState(() {
      print("doSub---begin");
      num1 = int.parse(text1.text);
      num2 = int.parse(text2.text);
      sum = num1 * num2;
    });
  }

  void doDiv() {
    setState(() {
      // ignore: avoid_print
      print("doSub---begin");
      num1 = int.parse(text1.text);
      num2 = int.parse(text2.text);
      if(num2==0){
        /*Fluttertoast.showToast(
            msg: "Dividend cannot be zero",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 1,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 18.0
        );*/
        _showToast();
      }else{
        sum = num1 ~/ num2;
      }
    });
  }

  void doClear() {
    setState(() {
      print("doSub---begin");
      text1.text = "0";
      text2.text = "0";
      sum=0;
    });
  }

  _showToast() {
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
      alignment: Alignment.center,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          SizedBox(
            width: 50.0,
          ),
          Text(
            "Dividend cannot be zero",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.black,
              backgroundColor: Colors.white,
              fontSize: 18,
            ),
          )
        ],
      ),
    );


    fToast.showToast(
      child: toast,
      gravity: ToastGravity.BOTTOM,
      toastDuration: const Duration(seconds: 1),
    );

    // Custom Toast Position
    fToast.showToast(
        child: toast,
        toastDuration: const Duration(seconds: 3),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 15.0,
            left: 15.0,
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    print("build---begin");
    return Scaffold(
      appBar: AppBar(
        title: const Text("calculatePage"),
      ),
      body: Container(
        padding: const EdgeInsets.all(45.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(hintText: "Please Enter Number one"),
              controller: text1,
            ),
            TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(hintText: "Please Enter Number two"),
              controller: text2,
            ),

            const Padding(
              padding: EdgeInsets.only(top: 18.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Calculate Output : $sum",
                  style: const TextStyle(
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.orange),
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 18.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                MaterialButton(
                  child: const Text("+"),
                  color: Colors.greenAccent,
                  onPressed: doAddition,
                ),
                MaterialButton(
                  child: const Text("-"),
                  color: Colors.greenAccent,
                  onPressed: doSub,
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 18.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                MaterialButton(
                  child: const Text("*"),
                  color: Colors.greenAccent,
                  onPressed: doMul,
                ),
                MaterialButton(
                  child: const Text("/"),
                  color: Colors.greenAccent,
                  onPressed: doDiv,
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 18.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                MaterialButton(
                  child: const Text("Clear"),
                  color: Colors.red,
                  onPressed: doClear,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

伟雪无痕
关注
专栏目录
【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息
Code Metaverse
08-30 4059
Toast 是一个简短的、非模态的消息提示框，它可以在应用的前端显示，不会打断用户的操作。`fluttertoast` 是一个非常受欢迎的 Flutter 包，用于在 Flutter 项目中轻松创建 Toast 消息。
Flutter toast弹框
isusjjyy的专栏
10-29 843
引入oktoast插件 pubspec.yaml文件中引入： dependencies: oktoast: ^2.2.0 作用及使用 oktoast插件，在应用中显示提示消息内容 参考网址：oktoast中文文档 注意事项：包裹你的 MaterialApp,不是包裹你的 Scaffold class MyApp extends StatelessWidget { ...
Flutter之Toast
augfun的博客
11-19 645
文章来源：http://www.liulongbin.top:8084/#/ 在pubspec.yaml的dependencies节点中，新增插件如下： dependencies: toast: ^0.1.3 在lib/main.dart中导入对应的插件： import 'package:toast/toast.dart'; 调用Toast.show()函数提示消息： // 参数1：提示消息 // 参数2：提示消息多久后自动隐藏 // 参数3：位置 Toast.show("鉴...
FlutterToast教程：轻松集成Flutter中的Toast功能
最新发布
gitblog_01115的博客
08-13 601
FlutterToast教程：轻松集成Flutter中的Toast功能 FlutterToastToast Plugin for Flutter项目地址:https://gitcode.com/gh_mirrors/fl/FlutterToast 项目介绍 FlutterToast 是一个专为 Flutter 平台设计的简单易用的 Toast 库，它允许开发者只需一行代码即可创建并显示消息提示...
Flutter一步实现Toast 弹窗（fluttertoast 库）
热门推荐
卜大爷的博客
01-30 2万+
Flutter一步实现Toast 弹窗（fluttertoast 库） 在 Flutter 中，想要实现一个 Toast 弹窗效果，最简单、最直接的方法就是使用 fluttertoast 库来实现。 官网地址：https://pub.flutter-io.cn/packages/fluttertoast 如何使用？ 导入依赖 # add this line to your dependencies fluttertoast: ^7.1.6 在使用的地方，导入类 import 'package:f
flutter 弹吐司
JerryWu145的专栏
02-12 1242
flutter 吐司包官网我只是大自然的搬运工
flutter fluttertoast
转载的svn使用
05-20 543
fluttertoast官方package 如何使用： 添加依赖库： fluttertoast: ^2.1.1 导入： import 'package:fluttertoast/fluttertoast.dart'; 示例 _toast(){ Fluttertoast.showToast( msg: "网络连接错误", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.BOTTOM,
flutter更新弹窗
zqwily的博客
08-09 714
代码】flutter更新弹窗。
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
Flutter之自定义Dialog实现版本更新弹窗功能的实现 Flutter是一款跨平台的移动应用开发框架，它提供了非常多的组件和功能，使得开发者可以快速构建高质量的应用程序。在实际开发中，我们经常需要实现一些自定义的...
flutter Toast实现消息提示框
08-25
Flutter Toast实现消息提示框 Flutter Toast是一种常用的消息提示框实现方式，主要用于在移动应用程序中向用户显示重要提示信息或反馈信息。下面详细介绍了Flutter Toast实现消息提示框的相关知识点。 Toast的基本...
android调用flutter弹窗,Flutter 写全局弹框的心路历程（dialog和overlay）
weixin_42356162的博客
05-26 923
最近做了个小功能，要做一个全局的弹窗，随处都可以弹出，这个咋做呢？说下从头到尾的思路：之前看过文章写过如何不使用context进行路由跳转，正常情况我们都是这么写：Navigator.of(context).pushNamed('new_page');都是需要传一个context才可以的。但有时我们可能需要在没法传context的时候跳转咋写呢？我们可以这样做：// 先新建一个navigatorK...
FlutterToast:颤抖吐司
05-29
吐司 Flutter Toast 插件。 如何使用 # add this line to your dependencies toast : ^0.1.4 import 'package:toast/toast.dart' ; Toast . show ( "Toast plugin app" , context, duration : Toast . LENGTH_SHORT , gravity : Toast . BOTTOM ); 财产 描述 留言 字符串（非空）（必填） 语境 BuildContext（非空）（必需） 期间 Toast.LENGTH_SHORT 或 Toast.LENGTH_LONG（可选） 重力 Toast.TOP（或）Toast.CENTER（或）Toast.BOTTOM 文本样式 TextStyle（默认字体大小：15，颜色：Colors.
Flutter版本的自定义toast
11-27
Flutter写的一个自定义toast的弹窗，一个简单的工具类可以直接传值调用，使用起来简单方便，可以设置文字颜色，背景色，文字大小等等
fluttertoast
weixin_38107457的博客
02-15 164
fluttertoast # add this line to your dependencies fluttertoast: ^8.0.8 import 'package:fluttertoast/fluttertoast.dart'; Fluttertoast.showToast( msg: "This is Center Short Toast", toastLength: Toast.LENGTH_SHORT, gravity:...
flutter的Toast
weixin_40763897的博客
08-25 3461
1.添加依赖 在pubspec.yaml文件中添加： dependencies: flutter: sdk: flutter fluttertoast: ^7.0.2 2.使用Toast Fluttertoast.showToast( msg: "This is Center Short Toast", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER,
从零开始写第一个Flutter app（七）——弹出toast
野猿新一
07-28 724
目录 从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...
Flutter Toast的使用
egrhef的博客
04-10 557
总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关在这我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。
Flutter 吐司弹框的使用 showToast弹框（插件）
前端颜小白
08-04 3271
Flutter关于showToast弹框先贴依赖 版本可根据最新变效果 先贴依赖 版本可根据最新变 fluttertoast: ^3.1.0 import ‘package:fluttertoast/fluttertoast.dart’; Fluttertoast.showToast( msg: '想弹出的', fontSize: 14, gravity: ToastGravity.BOTTOM, timeInSecForIos: 1, te
flutter getx 弹窗
01-04
以下是使用Flutter GetX实现弹窗的示例代码： 1. 首先，确保你已经导入了所需的依赖包和文件。 ```dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; ``` 2. 在应用程序顶层，将`GetMaterialApp`作为顶层组件，并设置`home`为弹窗示例页面。 ```dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: DialogExample(), ); } } ``` 3. 创建一个弹窗示例页面`DialogExample`，并在该页面中调用`BottomSheet`。 ```dart class DialogExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Dialog Example"), ), body: Center( child: ElevatedButton( child: Text("Show Bottom Sheet"), onPressed: () { showBottomSheet(); }, ), ), ); } void showBottomSheet() { Get.bottomSheet( Container( height: 200, color: Colors.white, child: Center( child: Text( "This is a bottom sheet", style: TextStyle(fontSize: 20), ), ), ), ); } } ``` 在上述代码中，我们创建了一个`DialogExample`页面，其中包含一个按钮。当按钮被点击时，调用`showBottomSheet`方法显示底部弹窗。底部弹窗使用`Get.bottomSheet`方法，并传入一个`Container`作为弹窗的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值