From 83f063cc58a01e996b6c1f4ee291255e5b69c836 Mon Sep 17 00:00:00 2001 From: Ibrahim Hassan Date: Tue, 21 May 2024 23:06:59 +0530 Subject: [PATCH] refactored code for avatar --- example/lib/main.dart | 4 +- lib/components/avatar/avatar.dart | 101 ++++++++++++++++++------------ 2 files changed, 63 insertions(+), 42 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 3de3cb1..0fb6a4d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -269,6 +269,7 @@ class _HomePageState extends State { text: "TUI", type: TUIAvatarContentType.text, ), + isBadged: false, ), TUIAvatar( avatarSize: TUIAvatarSize.xl, @@ -276,6 +277,7 @@ class _HomePageState extends State { text: "TUI", type: TUIAvatarContentType.text, ), + isBadged: false, ), TUIAvatar( avatarSize: TUIAvatarSize.m, @@ -283,7 +285,7 @@ class _HomePageState extends State { type: TUIAvatarContentType.icon, icon: Symbol.export.value, ), - isBadged: true, + isBadged: false, ), TUIAvatar( avatarSize: TUIAvatarSize.xxl, diff --git a/lib/components/avatar/avatar.dart b/lib/components/avatar/avatar.dart index 483b231..068265a 100644 --- a/lib/components/avatar/avatar.dart +++ b/lib/components/avatar/avatar.dart @@ -61,47 +61,54 @@ class TUIAvatar extends StatelessWidget { circleChild = ClipOval(child: avatarContent.image!); } - CircleAvatar circleAvatar = CircleAvatar( - radius: avatarSize._size / 2, - backgroundColor: backgroundColor, - child: circleChild, - ); - - if (isBadged) { - return LayoutBuilder( - builder: (context, constraints) { - Positioned badge; - - if (constraints.maxHeight != double.infinity) { - badge = Positioned( - left: constraints.maxWidth / 2 + avatarSize._size / 4, - top: constraints.maxHeight / 2 + avatarSize._size / 4, - child: Container( - height: avatarSize._badgeSize, - width: avatarSize._badgeSize, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: colors.success, - ), + Widget circleAvatar = ClipRRect( + borderRadius: BorderRadius.circular(8.0), + child: Container( + alignment: Alignment.center, + width: avatarSize._size, + height: avatarSize._size, + color: backgroundColor, + child: circleChild, + )); + + return LayoutBuilder( + builder: (context, constraints) { + Positioned? badge; + + if (constraints.maxHeight != double.infinity) { + badge = Positioned( + left: constraints.maxWidth / 2 + avatarSize._size / 4, + top: constraints.maxHeight / 2 + avatarSize._size / 4, + child: Container( + height: avatarSize._badgeSize, + width: avatarSize._badgeSize, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: colors.success, ), - ); - } else { - badge = Positioned( - left: constraints.maxWidth / 2 + avatarSize._size / 4, - bottom: 0, - child: Container( - height: avatarSize._badgeSize, - width: avatarSize._badgeSize, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: colors.success, - ), + ), + ); + } else { + badge = Positioned( + left: constraints.maxWidth / 2 + + avatarSize._size / 2 - + avatarSize._badgeSize / 2, + bottom: -avatarSize._badgeSize / 2, + child: Container( + height: avatarSize._badgeSize, + width: avatarSize._badgeSize, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: colors.success, ), - ); - } + ), + ); + } + if (isBadged) { return Stack( alignment: Alignment.center, + clipBehavior: Clip.none, children: [ Center( child: SizedBox( @@ -113,11 +120,23 @@ class TUIAvatar extends StatelessWidget { badge ], ); - }, - ); - } else { - return circleAvatar; - } + } else { + return Stack( + alignment: Alignment.center, + clipBehavior: Clip.none, + children: [ + Center( + child: SizedBox( + width: avatarSize._size, + height: avatarSize._size, + child: circleAvatar, + ), + ), + ], + ); + } + }, + ); } }