Flutter便捷弹窗提示插件handy_toast的使用

Flutter便捷弹窗提示插件handy_toast的使用

Handy toast for flutter

一个为Flutter设计的易于使用的弹窗提示插件！

依赖于 context_holder

1. 添加依赖

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

dependencies:
  handy_toast: ^0.0.4

2. 初始化上下文持有者

导入context_holder库：

import 'package:context_holder/context_holder.dart';

设置你的根应用的navigatorKey为ContextHolder.key。

对于MaterialApp：

void main() {
  runApp(
    MaterialApp(
      /// 必须设置navigatorKey!!!!!!
      navigatorKey: ContextHolder.key,
      home: Scaffold(),
    ),
  );
}

对于CupertinoApp：

void main() {
  runApp(
    CupertinoApp(
      /// 必须设置navigatorKey!!!!!!
      navigatorKey: ContextHolder.key,
      home: Scaffold(),
    ),
  );
}

3. 导入easy toast

import 'package:handy_toast/handy_toast.dart';

4. 使用easy toast

'handy toast'.toast();

4. 其他选项

可以修改默认样式。

/// 修改Toast背景颜色为带有透明度的绿色。
Toast.defaultStyle = ToastStyle(
  color: Colors.green.withOpacity(0.8),
);

完整示例

以下是完整的示例代码：

import 'package:context_holder/context_holder.dart';
import 'package:handy_toast/handy_toast.dart';
import 'package:flutter/material.dart';

/// Created by GP
/// 2020/11/27.

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 修改Toast默认样式
    Toast.defaultStyle = ToastStyle(
      color: Colors.green.withOpacity(0.8),
    );
    return MaterialApp(
      navigatorKey: ContextHolder.key,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easy toast example app'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: Text('Toast at top'),
              onPressed: () => Toast.toast('Top toast', gravity: Gravity.top),
            ),
            TextButton(
              child: Text('Toast at center'),
              onPressed: () => Toast.toast('Center toast', gravity: Gravity.center, duration: Toast.LONG),
            ),
            TextButton(
              child: Text('Toast at bottom'),
              onPressed: () => Toast.toast('Bottom toast'),
            ),
            TextButton(
              child: Text('Widget toast'),
              onPressed: () => Toast.toast(
                Icon(
                  Icons.details,
                  color: Colors.white,
                ),
              ),
            ),
            TextButton(
              child: Text('Easy to use toast.'),
              onPressed: () => 'Just toast'.toast(),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


handy_toast 是一个 Flutter 插件，用于在应用中快速显示轻量级的弹窗提示（Toast）。它提供了简单易用的 API，可以帮助开发者快速实现 Toast 提示功能。以下是如何使用 handy_toast 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 handy_toast 依赖：

dependencies:
  flutter:
    sdk: flutter
  handy_toast: ^最新版本

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

2. 导入包

在你的 Dart 文件中导入 handy_toast 包：

import 'package:handy_toast/handy_toast.dart';

3. 基本使用

handy_toast 提供了多种显示 Toast 的方法，下面是一些常见的用法：

显示普通 Toast

HandyToast.showToast(
  context: context,
  text: '这是一个普通的 Toast 提示',
);

显示带图标的 Toast

HandyToast.showToast(
  context: context,
  text: '这是一个带图标的 Toast 提示',
  icon: Icons.check,
);

自定义 Toast 样式

你可以通过 backgroundColor、textColor、duration 等参数来自定义 Toast 的样式和显示时间：

HandyToast.showToast(
  context: context,
  text: '自定义样式的 Toast',
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  duration: Duration(seconds: 3),
);

显示位置

你可以通过 position 参数来指定 Toast 显示的位置，支持 ToastPosition.top、ToastPosition.center 和 ToastPosition.bottom：

HandyToast.showToast(
  context: context,
  text: '显示在顶部的 Toast',
  position: ToastPosition.top,
);

4. 其他功能

handy_toast 还支持一些其他功能，例如：

  • 显示带进度的 Toast：可以通过 showProgressToast 方法显示一个带进度条的 Toast。
  • 显示带按钮的 Toast：可以通过 showToastWithButton 方法显示一个带按钮的 Toast。

5. 示例代码

以下是一个完整的示例代码，展示了如何使用 handy_toast 显示不同类型的 Toast：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ToastExample(),
    );
  }
}

class ToastExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Handy Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                HandyToast.showToast(
                  context: context,
                  text: '这是一个普通的 Toast 提示',
                );
              },
              child: Text('显示普通 Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                HandyToast.showToast(
                  context: context,
                  text: '这是一个带图标的 Toast 提示',
                  icon: Icons.check,
                );
              },
              child: Text('显示带图标的 Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                HandyToast.showToast(
                  context: context,
                  text: '自定义样式的 Toast',
                  backgroundColor: Colors.blue,
                  textColor: Colors.white,
                  duration: Duration(seconds: 3),
                );
              },
              child: Text('显示自定义样式的 Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                HandyToast.showToast(
                  context: context,
                  text: '显示在顶部的 Toast',
                  position: ToastPosition.top,
                );
              },
              child: Text('显示在顶部的 Toast'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部