Flutter通知提示插件notify_toast的使用

Flutter通知提示插件notify_toast的使用

使用它

依赖它

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

dependencies:
  notify_toast: 0.0.3

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

导入它

在 Dart 文件中导入该库：

import 'package:notify_toast/notify_toast.dart';

示例

以下是一个完整的示例，展示如何使用 notify_toast 插件来显示通知提示，并提供关闭按钮以隐藏通知。

示例代码

// main.dart
/*
 * [@Author](/user/Author): A kingiswinter@gmail.com
 * [@Date](/user/Date): 2024-11-29 17:02:35
 * [@LastEditors](/user/LastEditors): A kingiswinter@gmail.com
 * [@LastEditTime](/user/LastEditTime): 2024-11-29 18:52:05
 * [@FilePath](/user/FilePath): /notify_toast/example/lib/main.dart
 * 
 * Copyright (c) 2024 by A kingiswinter@gmail.com, All Rights Reserved.
 */
import 'package:flutter/material.dart';
import 'package:notify_toast/notify_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: 'Flutter Demo Home Page'),
    );
  }
}

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: <Widget>[
            // 显示通知提示的按钮
            TextButton(
              onPressed: () {
                // 显示通知提示
                NotifyToast().show(
                  context,
                  bgColor: Colors.green.withOpacity(0.6), // 背景颜色
                  progressColor: Colors.blueGrey, // 进度条颜色
                  progressHeight: 4, // 进度条高度
                  child: Container(
                    padding: EdgeInsets.only(
                      top: MediaQuery.of(context).padding.top + 16, // 上方内边距
                      bottom: 24, // 下方内边距
                    ),
                    child: Row(
                      children: [
                        const Expanded(
                          child: Text(
                            'NotifyToast', // 提示文本
                          ),
                        ),
                        IconButton(
                          onPressed: () {
                            // 隐藏通知提示
                            NotifyToast().hide();
                          },
                          icon: const Icon(
                            Icons.close_rounded, // 关闭图标
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
              child: Text('Show'), // 按钮文本
            ),
            // 隐藏通知提示的按钮
            TextButton(
              onPressed: () {
                // 隐藏通知提示
                NotifyToast().hide();
              },
              child: Text('Hide'), // 按钮文本
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


notify_toast 是一个 Flutter 插件，用于在应用程序中显示简单的通知提示（Toast）。它可以帮助你在应用中显示短暂的消息，类似于 Android 的 Toast 消息。

安装

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

dependencies:
  flutter:
    sdk: flutter
  notify_toast: ^1.0.0  # 请检查最新版本

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

基本用法

  1. 导入包：

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

    import 'package:notify_toast/notify_toast.dart';

  2. 显示 Toast：

    使用 NotifyToast.show 方法来显示 Toast 消息。你可以指定消息内容、持续时间、位置等。

    NotifyToast.show(
  context,
  message: 'Hello, World!',
  duration: Duration(seconds: 2),
  position: ToastPosition.bottom,
);
    • context: 当前 BuildContext。
    • message: 要显示的消息内容。
    • duration: Toast 显示的持续时间，默认为 2 秒。
    • position: Toast 显示的位置，可以是 ToastPosition.top、ToastPosition.center 或 ToastPosition.bottom。

  3. 自定义 Toast：

    你可以通过传递 backgroundColor、textColor、fontSize 等参数来自定义 Toast 的外观。

    NotifyToast.show(
  context,
  message: 'Custom Toast',
  duration: Duration(seconds: 3),
  position: ToastPosition.center,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  fontSize: 16.0,
);

示例

以下是一个完整的示例，展示如何在按钮点击时显示 Toast：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Notify Toast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              NotifyToast.show(
                context,
                message: 'Button Clicked!',
                duration: Duration(seconds: 2),
                position: ToastPosition.bottom,
              );
            },
            child: Text('Show Toast'),
          ),
        ),
      ),
    );
  }
}
回到顶部