Add icon overlap.

givtnl · Sep 25, 2024 · fa22a18 · fa22a18
1 parent 67cb06c
commit fa22a18
Showing 1 changed file with 38 additions and 16 deletions.
diff --git a/lib/features/family/features/reflect/presentation/widgets/game_profile_item.dart b/lib/features/family/features/reflect/presentation/widgets/game_profile_item.dart
@@ -50,25 +50,21 @@ class GameProfileItem extends StatelessWidget {
               ),
               Align(
                 alignment: Alignment.bottomCenter,
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.max,
-                  children: List.generate(
-                    profile.roles.length,
-                    (i) => Container(
-                      width: 36,
-                      height: 36,
-                      decoration: BoxDecoration(
-                        shape: BoxShape.circle,
-                        color: profile.roles[i].color,
+                child: profile.roles.length == 2 ? SizedBox(
+                  height: 36,width: (36*2)-4,
+                  child: Stack(
+                    children: [
+                      Positioned(
+                        right: 0,
+                        child: _icon(profile.roles[1]),
                       ),
-                      child: Icon(
-                        _getIconPerRole(profile.roles[i]),
-                        color: FamilyAppTheme.primary20,
+                      Positioned(
+                        left: 0,
+                        child: _icon(profile.roles[0]),
                       ),
-                    ),
+                    ],
                   ),
-                ),
+                ) : _iconRow(),
               ),
             ],
           ),
@@ -86,6 +82,32 @@ class GameProfileItem extends StatelessWidget {
     );
   }
 
+  Row _iconRow() {
+    return Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: List.generate(
+                  profile.roles.length,
+                  (i) => _icon(profile.roles[i]),
+                ),
+              );
+  }
+
+  Container _icon(Role role) {
+    return Container(
+      width: 36,
+      height: 36,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: role.color,
+      ),
+      child: Icon(
+        _getIconPerRole(role),
+        size: 16,
+        color: FamilyAppTheme.primary20,
+      ),
+    );
+  }
+
   IconData _getIconPerRole(Role? role) {
     switch (role.runtimeType) {
       case SuperHero: