Flutter自定义Toast提示插件customtoastshow的使用

Flutter自定义Toast提示插件customtoastshow的使用

特性

以下是customtoastshow插件的主要特性:

  • 心跳动画
  • 完全可定制的文字
  • 内置动画效果
  • 支持左右布局(LTR/RTL)
  • 可自定义Toast显示时长
  • 支持顶部、底部或居中显示
  • 带有动画图标的Toast
  • 内置类型(成功、警告、错误、信息、删除)
  • 支持自定义设计Toast
  • 支持空安全
  • 支持长文本

开始使用

在你的pubspec.yaml文件中添加以下依赖项:

dependencies:
  customtoastshow: ^1.6.0

或者直接引用主仓库:

dependencies:
  customtoastshow:
    git: https://github.com/palashsethiya/ToastHandler.git

然后运行flutter pub get以安装依赖。


属性说明

名称 类型 描述 是否必需 默认值
description String 提示文字 N/A
title String Toast标题 空字符串
descriptionStyle TextStyle 应用于描述文字的样式 TextStyle(color: Colors.black)
titleStyle TextStyle 应用于标题文字的样式 TextStyle(color: Colors.black)
icon IconData Toast图标 自定义Toast时必需 N/A
color Color 自定义Toast背景颜色(应用于背景、图标和侧边栏) 自定义Toast时必需 N/A
width double 自定义Toast宽度 350
height double 自定义Toast高度 80
iconSize double 图标大小 40
iconType ICON_TYPE 图标设计类型(Material设计或Cupertino设计),值为ICON_TYPE.MATERIAL_DESIGNICON_TYPE.CUPERTINO ICON_TYPE.MATERIAL_DESIGN
enableAnimation boolean 是否启用图标的心跳动画 true
layoutOrientation ORIENTATION Toast布局方向(从左到右或从右到左) ORIENTATION.LTR
animationType ANIMATION Toast进入动画类型 ANIMATION.FROM_BOTTOM
animationDuration Duration 动画持续时间 Duration(milliseconds: 1500)
toastDuration Duration Toast显示时长 Duration(seconds: 3)
animationCurve Curves Toast动画曲线 Curves.ease
position MOTION_TOAST_POSITION Toast显示位置(顶部、底部、居中) MOTION_TOAST_POSITION.BOTTOM
borderRadius double 定义Toast的圆角半径 20
onClose Function Toast关闭时调用的回调函数 null

注意:

  • 创建自定义Toast时,无需使用iconType,它在渲染时不会被使用。
  • 底部Toast不能设置FROM_TOP动画,顶部Toast不能设置FROM_BOTTOM动画。
  • 居中显示的自定义Toast不会应用动画。

实现示例

成功Toast
CustomToast.success(
  title: "Success Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Example of success custom toast",
  descriptionStyle: TextStyle(fontSize: 12),
  width: 300,
).show(context);
警告Toast
CustomToast.warning(
  title: "Warning Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "This is a Warning",
).show(context);
错误Toast
CustomToast.error(
  title: "Error",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Please enter your name",
).show(context);
信息Toast
CustomToast.info(
  title: "Info Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Example of Info Toast",
).show(context);
删除Toast
CustomToast.delete(
  title: "Deleted",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "The item is deleted",
).show(context);
自定义Toast

创建自定义Toast时,需要指定icondescriptioncolor

CustomToast(
  icon: Icons.alarm,
  color: Colors.pink,
  title: "Custom Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "You can customize the toast!",
  width: 300,
).show(context);
右侧布局的Toast

更改Toast布局需要使用layoutOrientation属性。

CustomToast.success(
  title: "Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Customize Toast",
  descriptionStyle: TextStyle(fontSize: 12),
  layoutOrientation: ORIENTATION.RTL,
  animationType: ANIMATION.FROM_RIGHT,
  width: 300,
).show(context);
顶部显示的Toast

通过position属性更改Toast显示位置。

CustomToast(
  icon: Icons.zoom_out,
  color: Colors.deepOrange,
  title: "Top Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Another custom toast example",
  position: MOTION_TOAST_POSITION.TOP,
  animationType: ANIMATION.FROM_TOP,
).show(context);
居中显示的Toast
CustomToast(
  icon: Icons.zoom_out,
  color: Colors.deepOrange,
  title: "Center Toast",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Another custom toast example",
  position: MOTION_TOAST_POSITION.CENTER,
).show(context);
使用onClose参数(连续显示两个Toast)
CustomToast.success(
  title: "User Data",
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  description: "Your data has been deleted",
  descriptionStyle: TextStyle(fontSize: 12),
  onClose: () {
    CustomToast.error(
      title: "User Data",
      titleStyle: TextStyle(fontWeight: FontWeight.bold),
      description: "Your data has been deleted",
      descriptionStyle: TextStyle(fontSize: 12),
    ).show(context);
  },
).show(context);
1 回复

更多关于Flutter自定义Toast提示插件customtoastshow的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,自定义Toast提示插件customtoastshow可以帮助你创建个性化的Toast消息。以下是如何使用customtoastshow插件的步骤:

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加customtoastshow插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  customtoastshow: ^1.0.0  # 请使用最新版本

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入customtoastshow插件:

import 'package:customtoastshow/customtoastshow.dart';

3. 使用CustomToastShow

CustomToastShow提供了多种方法来显示Toast消息。以下是一些常见的用法:

显示简单的Toast消息

CustomToastShow.showToast(
  context,
  message: '这是一个简单的Toast消息',
  duration: Duration(seconds: 2),
);

显示带有图标的Toast消息

CustomToastShow.showToastWithIcon(
  context,
  message: '这是一个带有图标的Toast消息',
  icon: Icons.check_circle,
  iconColor: Colors.green,
  duration: Duration(seconds: 2),
);

显示自定义样式的Toast消息

CustomToastShow.showCustomToast(
  context,
  message: '这是一个自定义样式的Toast消息',
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  borderRadius: 10.0,
  duration: Duration(seconds: 2),
);

4. 参数说明

  • context: 上下文,通常是BuildContext
  • message: 要显示的Toast消息内容。
  • duration: Toast消息显示的持续时间。
  • icon: 显示的图标(可选)。
  • iconColor: 图标的颜色(可选)。
  • backgroundColor: Toast消息的背景颜色(可选)。
  • textColor: Toast消息的文本颜色(可选)。
  • borderRadius: Toast消息的圆角半径(可选)。

5. 示例代码

以下是一个完整的示例代码,展示了如何使用customtoastshow插件:

import 'package:flutter/material.dart';
import 'package:customtoastshow/customtoastshow.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Toast Show Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  CustomToastShow.showToast(
                    context,
                    message: '这是一个简单的Toast消息',
                    duration: Duration(seconds: 2),
                  );
                },
                child: Text('显示简单Toast'),
              ),
              ElevatedButton(
                onPressed: () {
                  CustomToastShow.showToastWithIcon(
                    context,
                    message: '这是一个带有图标的Toast消息',
                    icon: Icons.check_circle,
                    iconColor: Colors.green,
                    duration: Duration(seconds: 2),
                  );
                },
                child: Text('显示带图标Toast'),
              ),
              ElevatedButton(
                onPressed: () {
                  CustomToastShow.showCustomToast(
                    context,
                    message: '这是一个自定义样式的Toast消息',
                    backgroundColor: Colors.blue,
                    textColor: Colors.white,
                    borderRadius: 10.0,
                    duration: Duration(seconds: 2),
                  );
                },
                child: Text('显示自定义样式Toast'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!