Flutter快速显示提示信息插件quick_toast的使用

简介

quick_toast 是一个轻量级的 Flutter 提示库，完全用 Flutter 实现，让你可以轻松地调用提示和加载功能，而无需上下文。

安装

在你的项目 pubspec.yaml 文件中添加以下代码：

dependencies:
  quick_toast: ^latest

然后运行 flutter pub get。

导入

在你的 Dart 文件中导入 quick_toast 库：

import 'package:quick_toast/quick_toast.dart';

如何使用

首先，在 MaterialApp 或 CupertinoApp 中初始化 QuickToast：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter QuickToast',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter QuickToast'),
      builder: QuickToast.init(), // 初始化 QuickToast
    );
  }
}

然后，你可以自由地使用它：

QuickToast.showLoading(status: 'loading...'); // 显示加载状态

QuickToast.showProgress(0.3, status: 'downloading...'); // 显示进度

QuickToast.showSuccess('Great Success!'); // 显示成功信息

QuickToast.showError('Failed with Error'); // 显示错误信息

QuickToast.showInfo('Useful Information.'); // 显示提示信息

QuickToast.showToast('Toast'); // 显示普通 Toast

QuickToast.showWidget(widget: Text('Custom Widget')); // 显示自定义 Widget

QuickToast.show(status: 'danger.', widget: const Icon(Icons.report_problem)); // 显示带图标的状态

QuickToast.dismiss(); // 隐藏所有提示

你还可以添加加载状态回调：

QuickToast.addStatusCallback((status) {
  print('QuickToast Status $status');
});

移除加载状态回调：

QuickToast.removeCallback(statusCallback); // 移除特定回调

QuickToast.removeAllCallbacks(); // 移除所有回调

自定义

注意事项

• textColor, indicatorColor, progressColor, backgroundColor 仅适用于 QuickToastStyle.custom。
• maskColor 仅适用于 QuickToastMaskType.custom。

/// 加载样式，默认为 [QuickToastStyle.dark]
QuickToastStyle loadingStyle;

/// 加载遮罩类型，默认为 [QuickToastMaskType.none]
QuickToastMaskType maskType;

/// 提示位置，默认为 [QuickToastToastPosition.center]
QuickToastToastPosition toastPosition;

/// 动画样式，默认为 [QuickToastAnimationStyle.opacity]
QuickToastAnimationStyle animationStyle;

/// 自定义动画，默认为 null
QuickToastAnimation customAnimation;

/// 文本对齐方式，默认为 [TextAlign.center]
TextAlign textAlign;

/// 文本样式，默认为 null
TextStyle textStyle;

/// 加载内容区域的内边距
EdgeInsets contentPadding;

/// 文本的内边距
EdgeInsets textPadding;

/// 指示器大小，默认为 40.0
double indicatorSize;

/// 加载圆角半径，默认为 5.0
double radius;

/// 文本字体大小，默认为 15.0
double fontSize;

/// 进度条指示器宽度，默认为 2.0
double progressWidth;

/// 指示器宽度，默认为 4.0，仅适用于 [QuickToastIndicatorType.ring, QuickToastIndicatorType.dualRing]
double lineWidth;

/// [showSuccess], [showError], [showInfo] 的显示时长，默认为 2000ms
Duration displayDuration;

/// 动画持续时间，默认为 200ms
Duration animationDuration;

/// 文本颜色，仅适用于 [QuickToastStyle.custom]
Color textColor;

/// 指示器颜色，仅适用于 [QuickToastStyle.custom]
Color indicatorColor;

/// 进度条指示器颜色，仅适用于 [QuickToastStyle.custom]
Color progressColor;

/// 加载背景色，仅适用于 [QuickToastStyle.custom]
Color backgroundColor;

/// 遮罩背景色，仅适用于 [QuickToastMaskType.custom]
Color maskColor;

/// 是否允许用户交互，默认为 false
bool userInteractions;

/// 是否点击后自动隐藏，默认为 true
bool dismissOnTap;

/// 自定义指示器 Widget
Widget indicatorWidget;

/// 自定义成功状态显示 Widget
Widget successWidget;

/// 自定义错误状态显示 Widget
Widget errorWidget;

/// 自定义提示状态显示 Widget
Widget infoWidget;

由于 QuickToast 是全局单例，你可以在任何地方自定义其样式：

QuickToast.instance
  ..displayDuration = const Duration(milliseconds: 2000)
  ..indicatorType = QuickToastIndicatorType.fadingCircle
  ..loadingStyle = QuickToastStyle.dark
  ..indicatorSize = 45.0
  ..radius = 10.0
  ..progressColor = Colors.yellow
  ..backgroundColor = Colors.green
  ..indicatorColor = Colors.yellow
  ..textColor = Colors.yellow
  ..maskColor = Colors.blue.withOpacity(0.5)
  ..userInteractions = true
  ..dismissOnTap = false
  ..customAnimation = CustomAnimation();

更多示例

更多示例请查看：flutter_quick_toast 示例

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'QuickToast Demo Home Page'),
      builder: QuickToast.init(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => QuickToast.showToast("Hello, world!"),
              child: const Text("showToast"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.showError("Hello, world!"),
              child: const Text("showError"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.showSuccess("Hello, world!"),
              child: const Text("showSuccess"),
            ),

            ElevatedButton(
              onPressed: () {
                QuickToast.showLoading(status: "Loading...");
                Future.delayed(const Duration(seconds: 2)).then((value) {
                  QuickToast.dismiss();
                });
              },
              child: const Text("showLoading"),
            ),

            ElevatedButton(
              onPressed: () async {
                  const durations = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95];
                  QuickToast.showProgress(durations.first, status: "Uploading...");

                  for (int i = 1; i < durations.length; i++) {
                      await Future.delayed(const Duration(milliseconds: 500));
                      QuickToast.showProgress(durations[i], status: "Uploading...");
                  }

                  await Future.delayed(const Duration(milliseconds: 800));
                  QuickToast.dismiss();
              },
              child: const Text("showProgress"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.showInfo("Hello, world!"),
              child: const Text("showInfo"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.show(status: "Danger!!!!", widget: const Icon(Icons.report_problem, color: Colors.amber, size: 40,)),
              child: const Text("show widget"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.showWidget(
                  widget: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        height: 200,
                        color: Colors.red,
                      )
                    ],
                  )
                ),
              child: const Text("show widget"),
            ),

            ElevatedButton(
              onPressed: () => QuickToast.dismiss(),
              child: const Text("dismiss"),
            ),
          ],
        ),
      ),
    );
  }
}