feat: add notifications bubble to chat navigation icon

linagora · Sep 7, 2023 · ede1c8f · ede1c8f
1 parent 07fe67e
commit ede1c8f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 27 deletions.
diff --git a/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_view.dart b/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_view.dart
@@ -2,10 +2,13 @@ import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/pages/chat_list/chat_list.dart';
 import 'package:fluffychat/pages/contacts_tab/contacts_tab.dart';
 import 'package:fluffychat/pages/search/search.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/client_stories_extension.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/layouts/adaptive_layout/adaptive_scaffold_primary_navigation.dart';
 import 'package:fluffychat/widgets/layouts/adaptive_layout/adaptive_scaffold.dart';
 import 'package:fluffychat/widgets/layouts/enum/adaptive_destinations_enum.dart';
+import 'package:fluffychat/widgets/twake_components/twake_navigation_icon/twake_navigation_icon.dart';
+import 'package:fluffychat/widgets/unread_rooms_badge.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -188,15 +191,21 @@ class AppScaffoldView extends StatelessWidget {
   List<NavigationDestination> getNavigationDestinations(BuildContext context) {
     return [
       NavigationDestination(
-        icon: const Icon(Icons.contacts_outlined),
+        icon: const TwakeNavigationIcon(
+          icon: Icons.contacts_outlined,
+        ),
         label: L10n.of(context)!.contacts,
       ),
       NavigationDestination(
-        icon: const Icon(Icons.chat),
+        icon: UnreadRoomsBadge(
+          filter: (room) => !room.isSpace && !room.isStoryRoom,
+        ),
         label: L10n.of(context)!.chat,
       ),
       NavigationDestination(
-        icon: const Icon(Icons.web_stories_outlined),
+        icon: const TwakeNavigationIcon(
+          icon: Icons.web_stories_outlined,
+        ),
         label: L10n.of(context)!.stories,
       ),
     ];

diff --git a/lib/widgets/twake_components/twake_navigation_icon/twake_navigation_icon.dart b/lib/widgets/twake_components/twake_navigation_icon/twake_navigation_icon.dart
@@ -0,0 +1,32 @@
+import 'package:fluffychat/widgets/twake_components/twake_navigation_icon/twake_navigation_icon_style.dart';
+import 'package:flutter/material.dart';
+
+class TwakeNavigationIcon extends StatelessWidget {
+  final IconData icon;
+  final int notificationCount;
+
+  const TwakeNavigationIcon({
+    super.key,
+    required this.icon,
+    this.notificationCount = 0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Badge(
+      backgroundColor: Theme.of(context).colorScheme.error,
+      isLabelVisible: notificationCount > 0,
+      largeSize: TwakeNavigationIconStyle.badgeHeight,
+      label: Text(
+        notificationCount.toString(),
+        style: Theme.of(context).textTheme.labelSmall?.copyWith(
+              color: Theme.of(context).colorScheme.onError,
+            ),
+      ),
+      child: Icon(
+        icon,
+        color: Theme.of(context).colorScheme.onSurfaceVariant,
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/twake_components/twake_navigation_icon/twake_navigation_icon_style.dart b/lib/widgets/twake_components/twake_navigation_icon/twake_navigation_icon_style.dart
@@ -0,0 +1,3 @@
+class TwakeNavigationIconStyle {
+  static double get badgeHeight => 16.0;
+}
diff --git a/lib/widgets/unread_rooms_badge.dart b/lib/widgets/unread_rooms_badge.dart
@@ -1,21 +1,17 @@
 import 'package:collection/collection.dart';
+import 'package:fluffychat/widgets/twake_components/twake_navigation_icon/twake_navigation_icon.dart';
 import 'package:flutter/material.dart';
 
-import 'package:badges/badges.dart' as b;
 import 'package:matrix/matrix.dart';
 
 import 'matrix.dart';
 
 class UnreadRoomsBadge extends StatelessWidget {
   final bool Function(Room) filter;
-  final b.BadgePosition? badgePosition;
-  final Widget? child;
 
   const UnreadRoomsBadge({
     Key? key,
     required this.filter,
-    this.badgePosition,
-    this.child,
   }) : super(key: key);
 
   @override
@@ -29,25 +25,9 @@ class UnreadRoomsBadge extends StatelessWidget {
       builder: (context, _) {
         final unreadCount = getNotificationsCount(context);
 
-        return b.Badge(
-          alignment: Alignment.bottomRight,
-          badgeContent: Text(
-            unreadCount.toString(),
-            style: TextStyle(
-              color: Theme.of(context).colorScheme.onPrimary,
-              fontSize: 12,
-            ),
-          ),
-          showBadge: unreadCount != 0,
-          animationType: b.BadgeAnimationType.scale,
-          badgeColor: Theme.of(context).colorScheme.primary,
-          position: badgePosition,
-          elevation: 4,
-          borderSide: BorderSide(
-            color: Theme.of(context).colorScheme.background,
-            width: 2,
-          ),
-          child: child,
+        return TwakeNavigationIcon(
+          icon: Icons.chat,
+          notificationCount: unreadCount,
         );
       },
     );