Package detailsv1.0.0

super_profile_picture

A customizable Flutter widget for displaying profile pictures, supporting both image and text options.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 33
Likes: 11
Pub points: 150

Install package

flutter pub add super_profile_picture

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Super Profile Picture is a customizable Flutter widget designed to display profile pictures with support for both images and text avatars. It offers flexible styling, shape options, and dynamic fallbacks when images are unavailable. Ideal for user interfaces in social apps, chat platforms, or dashboards, it ensures consistent visual presentation across devices. The widget integrates seamlessly into Flutter projects and supports all major platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

User profile displays
Chat interfaces
Dashboard widgets
Social media apps
Team member lists

Key features

Image and text avatar support
Customizable shapes and sizes
Fallback text for missing images
Platform-agnostic design
Easy integration with Flutter
Responsive layout handling

Suitable for

Developers building social apps
UI designers needing consistent avatars
Projects requiring cross-platform compatibility
Apps with user profiles or messaging features
Teams wanting reusable avatar components

Considerations

Requires image loading setup for remote URLs
Limited to basic avatar functionality
No built-in avatar generation from names
May need additional styling for complex UIs
Depends on external image loading libraries

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

logo

version

A customizable Flutter widget for displaying profile pictures, supporting both image and text options. It will show label text in case the image is not provided or fails to load. You can use any image provider, such as NetworkImage, AssetImage, and more, to display the image.

Live Demo & Experiment Page

Live demo: Demo & Experiment site

Installation

i. Add the latest version of this package to your pubspec.yaml file, and run: 'dart pub get':

dependancies:
  super_profile_picture: ^1.0.0

ii. Import the package in your Flutter App and use it.

import 'package:super_profile_picture/super_profile_picture.dart';

Note

The background color will be set according to the first letter of the label. Customization of the background color is not currently supported but may be added in the future.

Code Sample

Default

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),

);

Max Label Length


SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    textDecorationProperties: TextDecorationProperties(
         maxLabelLength: 3,  
    ),
);

Empty Name / Blank

SuperProfilePicture(
    label: "",
    radius: 30,
);

With Border

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    border: Border.all(width: 6, color: Colors.blue),
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),
    border: Border.all(width: 6, color: Colors.blue),

);

Properties

label
radius
textDecorationProperties
- fontSize;
- maxLabelLength;
- useFittedBox;
- fontColor;
- fontWeight;
- letterSpacing;
- padding;
- fontStyle;
imageDecorationProperties
- frameBuilder;
- loadingBuilder;
- errorBuilder;
- semanticLabel;
- excludeFromSemantics;
- width;
- height;
- color;
- opacity;
- colorBlendMode;
- fit;
- alignment;
- repeat;
- centerSlice;
- matchTextDirection;
- gaplessPlayback;
- isAntiAlias;
- filterQuality;
border
borderRadius
image
clipBehavior

Future Tasks

Add customizable background color function.

Source repository

SM-SHIFAT/Super-Profile-Picture