背景
??在進(jìn)行app開發(fā)的過程中,我們往往需要實(shí)現(xiàn)類似于微信圖標(biāo)右上角的消息提醒紅點(diǎn)功能累魔。類似下圖:
??在傳統(tǒng)的App開發(fā)流程中透乾,這種問題都有現(xiàn)成的解決方案,但是在flutter中如何實(shí)現(xiàn)類似效果呢贾富?社區(qū)已經(jīng)有了一個庫實(shí)現(xiàn)類似的功能flutter_app_badger, 這個庫的實(shí)現(xiàn)原理是對社區(qū)中原來已經(jīng)有的庫進(jìn)行了一個簡單的封裝客们,方便flutter框架調(diào)用
具體使用
在pubspec.yaml文件中加入如下內(nèi)容:
dependencies:
flutter_app_badger: ^1.1.2
然后執(zhí)行命令flutter pub get
,安裝到本地崇决。
使用時只需在文件頭部加上如下內(nèi)容:
import 'package:flutter_app_badger/flutter_app_badger.dart';
為了適配ios設(shè)備,還需要在Info.plist
文件中添加如下鍵值對:
<key>UIBackgroundModes</key>
<array>
<string>remote-notification</string>
</array>
這個庫的使用方法非常簡單底挫,api只有以下幾個:
- 設(shè)置右上角數(shù)字
FlutterAppBadger.updateBadgeCount(1);
// 只支持int類型
- 移除紅點(diǎn)
FlutterAppBadger.removeBadge();
- 檢查當(dāng)前設(shè)備是否支持該特性:
FlutterAppBadger.isAppBadgeSupported();