zeshanghayoomi/flutter_user_profile_avatar

Flutter User Profile Avatar

A simple widget that display round profile picture where the picture is fetched from network and displays circular progress indicator whilst the image is being loaded. Also, has the ability to display notification bubble.

https://raw.githubusercontent.com/zeshanghayoomi/flutter_user_profile_avatar/master/repo_assets/simulator.gif

How to use

UserProfileAvatar(
        avatarUrl: 'https://picsum.photos/id/237/5000/5000',
        onAvatarTap: () {
          print('Avatar Tapped..');
        },
        notificationCount: 10,
        notificationBubbleTextStyle: TextStyle(
          fontSize: 30,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        avatarSplashColor: Colors.purple,
        radius: 100,
        isActivityIndicatorSmall: false,
        avatarBorderData: AvatarBorderData(
          borderColor: Colors.white,
          borderWidth: 5.0,
        ),
      )

Properties

• avatarUrl
  The url for the image, if this set to null or empty then an empty user avatar gets displayed by default.

https://raw.githubusercontent.com/zeshanghayoomi/flutter_user_profile_avatar/master/repo_assets/1.png

• onAvatarTap
  Use this to perform any action when the avatar gets tapped.

• notificationCount
  Pass an int to display the notification bubble. 99+ gets displayed if notification count was larger than 100.

• notificationBubbleTextStyle
  Used to style the notification count, if null then the default one will be applied.

• avatarSplashColor
  Splash color when user taps on the avatar.

• radius
  Use this to size the avatar.

  • minimum default radius is 15
  • maximum default radius is 150

• isActivityIndicatorSmall
  use this to display small/large circular progress indicator (native) when image is loading, default is true.

https://raw.githubusercontent.com/zeshanghayoomi/flutter_user_profile_avatar/master/repo_assets/2.png https://raw.githubusercontent.com/zeshanghayoomi/flutter_user_profile_avatar/master/repo_assets/3.png

• avatarBorderData
  Use this to apply border width and color of the avatar.