Flutter弹出提示插件flexi_toast的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter弹出提示插件flexi_toast的使用

Flexi Toast是一个为Flutter设计的可定制且灵活的通知系统。它可以让你在屏幕顶部或底部显示通知，并支持各种自定义选项，如颜色、图标、文本样式和持续时间。此外，toast还可以通过点击手势来处理用户交互。

创建者

@badiniibrahim

如果你喜欢我的工作，请买杯咖啡支持我。感谢你的支持 ❤️

Buy Me A Coffee

截图

  • iOS Flexi Toast iOS
  • Android Flexi Toast Android

特性

  • 可定制的通知，可以在屏幕顶部或底部显示。
  • 多种类型的toast，具有不同的颜色（成功、信息、警告和危险）。
  • 自定义的持续时间，用于控制toast的可见时间。
  • 每个toast可选的图标。
  • 灵活的文本样式和圆角边框。

开始使用

在你的pubspec.yaml文件中添加依赖：

dependencies:
  ...
  flexi_toast: latest_version

完整示例

以下是一个完整的示例，展示了如何使用Flexi Toast：

import 'package:flexi_toast/toast_manager.dart';
import 'package:flexi_toast/toast_type.dart';
import 'package:flexi_toast/toast_position.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flexi Toast 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              ToastManager.show(
                context: context,
                message: "成功通知",
                duration: Duration(seconds: 2),
                position: ToastPosition.bottom,
                type: ToastType.success,
                onTap: () {
                  print("Toast 被点击！");
                },
              );
            },
            child: Text('显示通知'),
          ),
        ),
      ),
    );
  }
}

参数

  • message：（必填）- 显示在通知中的主要消息。
  • description：（可选）- 显示在消息下方的详细描述或附加信息。
  • duration：（可选）- 通知保持可见的时间。默认为2秒。
  • position：（可选）- 通知的位置（顶部或底部）。默认为ToastPosition.bottom。
  • type：（可选）- 通知类型，决定其颜色和样式。可以是ToastType.danger、ToastType.warning、ToastType.success或ToastType.info。默认为ToastType.info。
  • textStyle：（可选）- 用于通知消息文本的TextStyle。默认是在深色背景上的白色文本。
  • borderRadius：（可选）- 通知背景的圆角半径。默认为Radius.circular(8)。
  • icon：（可选）- 作为通知图标显示的可选小部件。

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用flexi_toast插件来弹出提示的示例代码。flexi_toast 是一个灵活且强大的Toast消息提示插件，它允许你自定义Toast的显示位置、动画、背景颜色等。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flexi_toast的依赖：

dependencies:
  flutter:
    sdk: flutter
  flexi_toast: ^4.0.2  # 请检查最新版本号

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

2. 导入插件

在你的Dart文件中导入flexi_toast插件：

import 'package:flexi_toast/flexi_toast.dart';

3. 使用FlexiToast

下面是一个简单的例子，展示如何在按钮点击时显示一个Toast消息：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlexiToast Example'),
        ),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 显示FlexiToast
        FlexiToast.showToast(
          context: context,
          msg: "Hello, this is a FlexiToast!",
          backgroundColor: Colors.blue,
          textColor: Colors.white,
          fontSize: 18.0,
          toastLength: FlexiToast.LENGTH_SHORT,
          gravity: FlexiToast.TOP, // 可以是TOP, BOTTOM, CENTER等
          animateIn: FlexiToast.BOUNCE, // 可以是BOUNCE, FADE_IN, SLIDE_IN_LEFT等
          animateOut: FlexiToast.FADE_OUT, // 可以是FADE_OUT, SLIDE_OUT_RIGHT等
          isRounded: true, // 是否圆角
          borderRadius: 16.0, // 圆角半径
          margin: 16.0, // Toast的外边距
          padding: 16.0, // Toast的内边距
          showShadow: true, // 是否显示阴影
        );
      },
      child: Text('Show Toast'),
    );
  }
}

解释

  • FlexiToast.showToast方法用于显示Toast消息。
  • context：当前的BuildContext。
  • msg：要显示的文本消息。
  • backgroundColor：Toast的背景颜色。
  • textColor：Toast的文本颜色。
  • fontSize：Toast文本的字体大小。
  • toastLength：Toast显示的持续时间（可以是FlexiToast.LENGTH_SHORT或FlexiToast.LENGTH_LONG）。
  • gravity：Toast显示的位置（可以是FlexiToast.TOP、FlexiToast.BOTTOM、FlexiToast.CENTER等）。
  • animateIn：Toast显示时的动画效果（可以是FlexiToast.BOUNCE、FlexiToast.FADE_IN、FlexiToast.SLIDE_IN_LEFT等）。
  • animateOut：Toast消失时的动画效果（可以是FlexiToast.FADE_OUT、FlexiToast.SLIDE_OUT_RIGHT等）。
  • isRounded：是否应用圆角。
  • borderRadius：圆角的半径。
  • margin：Toast的外边距。
  • padding：Toast的内边距。
  • showShadow：是否显示阴影。

通过这些参数，你可以高度自定义Toast的外观和行为。希望这个示例对你有帮助！

回到顶部