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.