widgets: Pull out reusable UnreadCountBadge widget

Author: chrisbobbe

lib/widgets/recent_dm_conversations.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/material.dart';
 
 import '../model/narrow.dart';
@@ -11,6 +9,7 @@ import 'message_list.dart';
 import 'page.dart';
 import 'store.dart';
 import 'text.dart';
+import 'unread_count_badge.dart';
 
 class RecentDmConversationsPage extends StatefulWidget {
   const RecentDmConversationsPage({super.key});
@@ -132,24 +131,8 @@ class RecentDmConversationsItem extends StatelessWidget {
               title))),
           const SizedBox(width: 12),
           unreadCount > 0
-            ? Padding(
-                padding: const EdgeInsetsDirectional.only(end: 16),
-                child: DecoratedBox(
-                  decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(3),
-                    color: const Color.fromRGBO(102, 102, 153, 0.15),
-                  ),
-                  child: Padding(
-                    padding: const EdgeInsetsDirectional.fromSTEB(4, 0, 4, 1),
-                    child: Text(
-                      style: const TextStyle(
-                        fontFamily: 'Source Sans 3',
-                        fontSize: 16,
-                        height: (18 / 16),
-                        fontFeatures: [FontFeature.enable('smcp')], // small caps
-                        color: Color(0xFF222222),
-                      ).merge(weightVariableTextStyle(context)),
-                      unreadCount.toString()))))
+            ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),
+                child: UnreadCountBadge(count: unreadCount))
             : const SizedBox(),
         ])));
   }

lib/widgets/unread_count_badge.dart

@@ -0,0 +1,38 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import 'text.dart';
+
+/// A widget to display a given number of unreads in a conversation.
+///
+/// Implements the design for these in Figma:
+///   <https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12387&mode=dev>
+class UnreadCountBadge extends StatelessWidget {
+  const UnreadCountBadge({
+    super.key,
+    required this.count,
+  });
+
+  final int count;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(3),
+        color: const Color.fromRGBO(102, 102, 153, 0.15),
+      ),
+      child: Padding(
+        padding: const EdgeInsetsDirectional.fromSTEB(4, 0, 4, 1),
+        child: Text(
+          style: const TextStyle(
+            fontFamily: 'Source Sans 3',
+            fontSize: 16,
+            height: (18 / 16),
+            fontFeatures: [FontFeature.enable('smcp')], // small caps
+            color: Color(0xFF222222),
+          ).merge(weightVariableTextStyle(context)),
+          count.toString())));
+  }
+}

test/widgets/unread_count_badge_test.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/widgets.dart';
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/widgets/unread_count_badge.dart';
+
+void main() {
+  group('UnreadCountBadge', () {
+    testWidgets('smoke test; no crash', (tester) async {
+      await tester.pumpWidget(
+        const Directionality(textDirection: TextDirection.ltr,
+          child: UnreadCountBadge(count: 1)));
+      tester.widget(find.text("1"));
+    });
+  });
+}