Flutter原生角标显示插件flutter_native_badge的使用

flutter_native_badge 是一个用于在iOS和macOS上显示应用图标角标的Flutter插件。它允许你设置角标数量、显示红点、清除角标以及获取当前的角标数量。

目前，该插件仅支持iOS和macOS平台，其他平台暂不支持。

预览

Ios App	MacOs App

使用方法

在使用任何方法之前，你应该检查当前平台是否支持。如果不支持，方法将抛出不受支持的异常。

每个方法都有一个 requestPermission 参数。如果设置为 true，则会在权限未授予时请求权限。否则，方法可能不会生效。

导入

import 'package:flutter_native_badge/flutter_native_badge.dart';

检查平台是否支持

bool isSupported = await FlutterNativeBadge.isSupported();

设置角标数量

FlutterNativeBadge.setBadgeCount(5);

显示红点

FlutterNativeBadge.showRedDot();

清除角标数量

FlutterNativeBadge.clearBadgeCount();

获取角标数量

int badgeCount = await FlutterNativeBadge.getBadgeCount();

注意: 对于iOS，getBadgeCount 依赖于已废弃的API，未来可能会不可用。iOS SDK中没有替代方案。如果你现在使用 getBadgeCount，最好考虑如何自己管理计数。

请求权限

每个方法都有一个 requestPermission 参数。如果设置为 true，则会在权限未授予时请求权限。

FlutterNativeBadge.setBadgeCount(5, requestPermission: true);

FlutterNativeBadge.showRedDot(requestPermission: true);

FlutterNativeBadge.clearBadgeCount(requestPermission: true);

int badgeCount = await FlutterNativeBadge.getBadgeCount(requestPermission: true);

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_native_badge 插件。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_native_badge/flutter_native_badge.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isSupported = false;
  int _badgeCount = 0;

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中初始化
  Future<void> initPlatformState() async {
    bool isSupported;

    // 平台消息可能会失败，因此我们使用 try/catch 来捕获 PlatformException
    // 我们还处理了消息可能返回 null 的情况
    try {
      isSupported = await FlutterNativeBadge.isSupported();
      if (isSupported) {
        await FlutterNativeBadge.clearBadgeCount();
      }
    } on PlatformException {
      isSupported = false;
    }

    // 如果小部件在异步平台消息传输过程中被从树中移除，
    // 我们希望丢弃回复而不是调用 setState 更新我们不存在的外观
    if (!mounted) return;

    setState(() {
      _isSupported = isSupported;
      _badgeCount = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 20),
              if (_isSupported)
                const Text('Native badge is supported')
              else
                const Text('Native badge is not supported'),
              const SizedBox(height: 20),
              if (_isSupported) Text('Badge count: $_badgeCount'),
              const SizedBox(height: 20),
              if (_isSupported) ...[
                ElevatedButton(
                  onPressed: () async {
                    await FlutterNativeBadge.setBadgeCount(_badgeCount + 1);
                    _incrementCounter();
                  },
                  child: const Text('Increment'),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () async {
                    await FlutterNativeBadge.clearBadgeCount();
                    _resetCounter();
                  },
                  child: const Text('Reset'),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _incrementCounter() async {
    setState(() {
      _badgeCount++;
    });
  }

  Future<void> _resetCounter() async {
    setState(() {
      _badgeCount = 0;
    });
  }
}

这个示例展示了如何检查平台是否支持角标功能，设置和清除角标数量，并在界面上显示当前的角标数量。你可以根据需要进行修改和扩展。