super_profile_picture 1.0.0

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

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

copied to clipboard

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

import 'package:super_profile_picture/super_profile_picture.dart';

copied to clipboard

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,
);

copied to clipboard

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

);

copied to clipboard

Max Label Length

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

copied to clipboard

Empty Name / Blank

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

copied to clipboard

With Border

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

copied to clipboard

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

);

copied to clipboard

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.