Flutter通知墙插件notification_wall的使用

notification_wall 是一个用于初始化和处理Firebase消息通知的状态小部件。

开始使用

该小部件用于处理新的通知。这需要手动设置 firebase_messaging 包才能工作。 相关文档可以在 Firebase Messaging Package 查看。

import 'package:notification_wall/notification_wall.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter NotificationWall Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: NotificationWall(
          topicsToSubscribe: ["news", "updates"],

          /// 新令牌到达时执行的操作
          onSetTokenCallback: (String token) {},

          /// 设置完成时执行的操作
          onSetupIsDoneCallback: () {},

          /// 新远程消息到达时执行的操作
          onNewNotificationCallback: (RemoteMessage? message) {},

          /// 隐藏返回的小部件，只需将NotificationWall作为IndexedStack的子小部件
          /// 设置过程中显示此小部件
          onSettingUpWall: Scaffold(
            body: Container(
              child: Center(
                child: Text("Setting Up remotenotifications"),
              ),
            ),
          ),

          /// 设置完成后显示此小部件
          childWidget: MyHomePage(title: 'Flutter Demo Home Page'),
        ));
  }
}

示例代码

以下是完整的示例代码，展示了如何在Flutter项目中使用 notification_wall 插件。

import 'package:flutter/material.dart';
import 'package:notification_wall/notification_wall.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter NotificationWall Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: NotificationWall(
          topicsToSubscribe: ["news", "updates"],

          /// 新令牌到达时执行的操作
          onSetTokenCallback: (String token) {},

          /// 设置完成时执行的操作
          onSetupIsDoneCallback: () {},

          /// 新远程消息到达时执行的操作
          onNewNotificationCallback: (RemoteMessage? message) {},

          /// 隐藏返回的小部件，只需将NotificationWall作为IndexedStack的子小部件
          /// 设置过程中显示此小部件
          onSettingUpWall: Scaffold(
            body: Container(
              child: Center(
                child: Text("Setting Up remotenotifications"),
              ),
            ),
          ),

          /// 设置完成后显示此小部件
          childWidget: MyHomePage(title: 'Flutter Demo Home Page'),
        ));
  }
}

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

  // 这个小部件是你的应用的首页。它是一个有状态的小部件，意味着
  // 它有一个状态对象（定义在下面），其中包含影响其外观的字段。
  // 这个类是状态的配置。它保存了由父组件（在这个例子中是App小部件）提供的值（在这里是标题）
  // 并且被构建方法使用。在Widget子类中，字段总是标记为"final"。

  final String? title;

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

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

  void _incrementCounter() {
    setState(() {
      // 调用setState告诉Flutter框架某些东西已经改变，
      // 导致它重新运行build方法以反映更新后的值。
      // 如果我们不调用setState而改变_counter，那么build方法就不会再次运行，
      // 因此看起来什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，例如在上面的_incrementCounter方法中。
    //
    // Flutter框架已被优化为使重新运行构建方法变得快速，
    // 因此你可以重建任何需要更新的东西，而不是单独更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，
        // 并使用它来设置我们的appbar标题。
        title: Text(widget.title!),
      ),
      body: Center(
        // Center是一个布局小部件。它接受单个子元素并将其放置在父元素的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并垂直排列它们。
          // 默认情况下，它水平调整自己的大小以适应其子元素，并尝试与它的父元素一样高。
          //
          // 要启用调试绘制（在控制台中按“p”，选择Android Studio中的“切换调试绘制”操作，
          // 或者Visual Studio Code中的“切换调试绘制”命令）可以看到每个小部件的线框。
          //
          // Column有各种属性可以控制它如何调整自己的大小和如何定位其子元素。
          // 在这里我们使用mainAxisAlignment将子元素垂直居中；主轴是垂直的，
          // 因为Column是垂直的（交叉轴是水平的）。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '你已经点击了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: Icon(Icons.add),
      ), // 这个逗号使自动格式化更美观。
    );
  }
}