super_profile_picture 1.0.0
super_profile_picture: ^1.0.0 copied to clipboard
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
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.