Flutter应用内通知插件flutter_inapp_notifications的使用

描述

Flutter In-App Notifications 是一个用于生成即时应用内通知的简单Flutter包。它可以帮助开发者在Flutter应用程序中快速实现类似Toast的通知功能，提供更加灵活和美观的通知展示方式。

安装

在你的项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_inapp_notifications: ^1.0.0

然后执行 flutter pub get 来安装该插件。

使用方法

初始化

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InAppNotifications',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter InAppNotifications'),
      builder: InAppNotifications.init(),
    );
  }
}

显示通知

你可以通过调用 InAppNotifications.show() 方法来显示一个通知。以下是几种不同的使用场景：

简单通知

InAppNotifications.show(
  title: 'Welcome to InAppNotifications',
  description: 'This is a very simple notification without any leading or ending widgets.',
  onTap: () {},
  persistent: true,
);

带有前导图标的通知

InAppNotifications.show(
  title: 'Welcome to InAppNotifications',
  leading: Icon(Icons.fact_check, size: 50),
  description: 'This is a very simple notification with leading widget.',
  onTap: () {},
);

带有前导和尾随图标的通知

InAppNotifications.show(
  title: 'Welcome to InAppNotifications',
  leading: Icon(Icons.fact_check, size: 50),
  ending: Icon(Icons.arrow_right_alt),
  description: 'This is a very simple notification with leading and ending widget.',
  onTap: () {},
);

自定义样式的通知

你可以自定义通知的样式，例如背景颜色、文本颜色等：

InAppNotifications.instance
  ..backgroundColor = Colors.orange
  ..textColor = Colors.purple;

InAppNotifications.show(
  title: 'Welcome to InAppNotifications',
  leading: Icon(Icons.fact_check, color: Colors.green, size: 50),
  ending: Icon(Icons.arrow_right_alt, color: Colors.red),
  description: 'This is a very simple notification with leading widget.',
  onTap: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => MainScreen(),
      ),
    );
  },
);

添加状态回调

你可以添加一个回调函数来监听通知的状态变化：

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

移除状态回调

如果你想移除某个或所有状态回调，可以使用以下方法：

InAppNotifications.removeCallback(statusCallback);

InAppNotifications.removeAllCallbacks();

自定义

你可以在任何地方自定义通知的样式：

InAppNotifications.instance
  ..titleFontSize = 14.0
  ..descriptionFontSize = 14.0
  ..textColor = Colors.black
  ..backgroundColor = Colors.white
  ..shadow = true
  ..animationStyle = InAppNotificationsAnimationStyle.scale;

如果你想要使用自定义动画，可以这样做：

InAppNotifications.instance
  ..titleFontSize = 14.0
  ..descriptionFontSize = 14.0
  ..textColor = Colors.black
  ..backgroundColor = Colors.white
  ..shadow = true
  ..customAnimation = MyCustomAnimation()
  ..animationStyle = InAppNotificationsAnimationStyle.custom;

示例代码

下面是一个完整的示例代码，展示了如何在一个Flutter项目中使用 flutter_inapp_notifications 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter In-App Notifications',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainScreen(),
      builder: InAppNotifications.init(),
    );
  }
}

_resetStyle() {
  InAppNotifications.instance
    ..titleFontSize = 14.0
    ..descriptionFontSize = 14.0
    ..textColor = Colors.black
    ..backgroundColor = Colors.white
    ..shadow = true
    ..animationStyle = InAppNotificationsAnimationStyle.scale;
}

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

  @override
  MainScreenState createState() => MainScreenState();
}

class MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter In-App Notifications'),
      ),
      body: Container(
        padding: const EdgeInsets.only(top: 50.0),
        alignment: Alignment.center,
        child: Column(
          children: [
            TextButton(
              onPressed: () {
                _resetStyle();

                InAppNotifications.show(
                    title: 'Welcome to InAppNotifications',
                    description:
                        'This is a very simple notification without any leading or ending widgets.',
                    onTap: () {},
                    persistent: true);
              },
              child: const Text("Show Simple Notification"),
            ),
            TextButton(
              onPressed: () {
                _resetStyle();

                InAppNotifications.show(
                    title: 'Welcome to InAppNotifications',
                    leading: const Icon(
                      Icons.fact_check,
                      size: 50,
                    ),
                    description:
                        'This is a very simple notification with leading widget.',
                    onTap: () {});
              },
              child: const Text("Show Notification with Leading widget"),
            ),
            TextButton(
              onPressed: () {
                _resetStyle();

                InAppNotifications.show(
                  title: 'Welcome to InAppNotifications',
                  leading: const Icon(
                    Icons.fact_check,
                    size: 50,
                  ),
                  ending: const Icon(Icons.arrow_right_alt),
                  description:
                      'This is a very simple notification with leading and ending widget.',
                  onTap: () {},
                );
              },
              child: const Text("Show Notification with Leading and Ending widget"),
            ),
            TextButton(
              onPressed: () {
                InAppNotifications.instance
                  ..backgroundColor = Colors.orange
                  ..textColor = Colors.purple;

                InAppNotifications.show(
                  title: 'Welcome to InAppNotifications',
                  leading: const Icon(
                    Icons.fact_check,
                    color: Colors.green,
                    size: 50,
                  ),
                  ending: const Icon(
                    Icons.arrow_right_alt,
                    color: Colors.red,
                  ),
                  description:
                      'This is a very simple notification with leading widget.',
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const MainScreen(),
                      ),
                    );
                  },
                );
              },
              child: const Text("Show Customized Notification"),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例代码展示了如何创建一个包含多个按钮的应用程序，每个按钮点击时会显示不同样式的应用内通知。希望这个示例能帮助你更好地理解和使用 flutter_inapp_notifications 插件。