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.

How to use

        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,


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

  • 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.

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