Refactored badge to match the new design (#78)

* refactored badge
tarkalabs · May 14, 2024 · 6ab7b78 · 6ab7b78
1 parent 5011cf5
commit 6ab7b78
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 24 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -316,30 +316,24 @@ class _HomePageState extends State<HomePage> {
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 TUIBadge(
-                  isNumbered: true,
-                  content: "1",
+                  content: "400",
                   badgeSize: TUIBadgeSize.l,
                 ),
                 TUIBadge(
-                  isNumbered: true,
-                  content: "1",
+                  content: "4",
                   badgeSize: TUIBadgeSize.s,
                 ),
                 TUIBadge(
-                  isNumbered: true,
-                  content: "1",
+                  content: "400",
                   badgeSize: TUIBadgeSize.xs,
                 ),
                 TUIBadge(
-                  isNumbered: false,
                   badgeSize: TUIBadgeSize.l,
                 ),
                 TUIBadge(
-                  isNumbered: false,
                   badgeSize: TUIBadgeSize.s,
                 ),
                 TUIBadge(
-                  isNumbered: false,
                   badgeSize: TUIBadgeSize.xs,
                 ),
               ],

diff --git a/lib/components/badge/badge.dart b/lib/components/badge/badge.dart
@@ -31,11 +31,11 @@ enum TUIBadgeSize {
   EdgeInsets _getEdgeInsets() {
     switch (this) {
       case xs:
-        return const EdgeInsets.fromLTRB(3, 0, 3, 0);
+        return const EdgeInsets.all(0);
       case s:
-        return const EdgeInsets.symmetric(horizontal: 5, vertical: 1);
+        return const EdgeInsets.symmetric(horizontal: 4);
       case l:
-        return const EdgeInsets.symmetric(horizontal: 8, vertical: 4);
+        return const EdgeInsets.symmetric(horizontal: 8);
     }
   }
 
@@ -72,26 +72,22 @@ enum TUIBadgeSize {
 class TUIBadge extends StatelessWidget {
   final TUIBadgeSize badgeSize;
   final String? content;
-  final bool isNumbered;
+  final Color? badgeColor;
 
-  const TUIBadge({
-    super.key,
-    required this.badgeSize,
-    this.content,
-    this.isNumbered = false,
-  });
+  const TUIBadge(
+      {super.key, required this.badgeSize, this.content, this.badgeColor});
 
   @override
   Widget build(BuildContext context) {
     TUIThemeData theme = TUITheme.of(context);
-    if (content != null && isNumbered) {
+
+    if (content != null && badgeSize != TUIBadgeSize.xs) {
       return Container(
         height: badgeSize._getBadgeSize(),
+        alignment: Alignment.center,
         constraints: BoxConstraints(
           minHeight: badgeSize._getBadgeSize(), //minimum height
           minWidth: badgeSize._getBadgeSize(), // minimum width
-          maxHeight: badgeSize._getBadgeSize(),
-          maxWidth: MediaQuery.of(context).size.width,
         ),
         decoration: BoxDecoration(
           color: theme.colors.error,
@@ -109,8 +105,8 @@ class TUIBadge extends StatelessWidget {
         width: badgeSize._getBadgeSize(),
         padding: badgeSize._getEdgeInsets(),
         decoration: BoxDecoration(
-            color: theme.colors.error,
-            borderRadius: const BorderRadius.all(Radius.circular(20))),
+            color: badgeColor ?? theme.colors.error,
+            borderRadius: BorderRadius.all(badgeSize._getBorderRadius())),
       );
     }
   }