Flutter消息提示插件ntoaster的使用

NToaster

Toasts是一种轻量级的通知，旨在模仿移动和桌面操作系统广泛使用的推送通知。

特性

• 可以通过单例或继承小部件（InheritedWidget）访问通知中心。
• 完全灵活的动画和小部件UI。
• 可以通过编程方式移除通知。
• 当用户长按通知时，其计时器将暂停，直到通知释放。

使用方法

步骤1：手动附加通知中心

你可以通过NToasterController.attach方法手动附加通知中心，或者构建一个NToasterCenter，它会自动处理通知中心的附加和分离，并为你提供一个NToaster继承小部件。

// 手动附加
final ntoaster = NToasterController.getInstance();
ntoaster.attach(context, configuration: NToasterConfiguration(
)); // 传递你的中心级别配置

步骤2：构建应用

在MaterialApp中包含NToasterCenter，并设置应用的基本配置。

// Widget附加
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const NToasterCenter(
        child: MyHomePage(title: 'Flutter Demo Home Page')),
  );
}

步骤3：入队通知

创建一个NotificationMetaData对象，并将其添加到通知队列中。这可以包含你希望显示的通知内容。

// 入队通知
final ntoaster = NToaster.of(context);
NotificationMetaData? notification;
notification = NotificationMetaData(
  showFor: Duration(milliseconds: 5000), // 显示时长
  item: GestureDetector(
    onTap: () {
      notification?.remove(); // 点击通知时移除
    },
    child: SizedBox(
      height: 100,
      width: 300,
      child: Card(
        elevation: 8.0,
        color: Colors.green,
        child: Text("$_counter Cool title", 
          style: Theme.of(context).textTheme.subtitle1?.copyWith(color: Colors.white),
        ),
      ),
    ),
  ),
);
ntoaster.enqueue(notification);

步骤4：立即移除通知

如果你持有NotificationMetaData的引用，可以在定时结束前立即移除该通知。

// 立即移除通知
final notificationX = NotificationMetaData(...);
final ntoaster = NToaster.of(context);
ntoaster.dequeue(notificationX);

示例代码

以下是完整的示例代码，演示了如何使用ntoaster插件来显示动态生成的通知。

import 'dart:math';

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const NToasterCenter(
          child: MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    _counter++;
    setState(() {});

    final ntoaster = NToaster.of(context);
    NotificationMetaData? notification;
    notification = NotificationMetaData(
      insertionAnimationBuilder: (context, child, animation) => ScaleTransition(
        scale: animation,
        child: child,
      ),
      removalAnimationBuilder: (context, child, animation) => SlideTransition(
        position: Tween(begin: const Offset(1, 0), end: const Offset(0.5, 0))
            .animate(animation),
        child: child,
      ),
      showFor: Duration(
          milliseconds:
              (Random(DateTime.now().millisecondsSinceEpoch).nextDouble() *
                      5000)
                  .toInt()),
      item: GestureDetector(
        onTap: () {
          notification?.remove();
        },
        child: SizedBox(
          height:
              Random(DateTime.now().millisecondsSinceEpoch).nextDouble() * 100 +
                  50,
          width: 300,
          child: Card(
            elevation: 8.0,
            color: Colors.red.withGreen(
                Random(DateTime.now().millisecondsSinceEpoch).nextInt(255)),
            child: Center(
              child: Text(
                "$_counter Cool title",
                style: Theme.of(context)
                    .textTheme
                    .subtitle1
                    ?.copyWith(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
    ntoaster.enqueue(
      notification,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}