James
Circular profile avatar
To have an online presence, you are going to need a good avatar.
For those who don’t know, an avatar is the same thing as a profile picture. But instead of an actual photo, you create a tiny image of a person that best represents you.
Circular Profile Avatar is a Flutter package that allows developers to create a circular profile avatar with a border, overlay, initial text, and many other useful features, which simplifies developers’ jobs. It is an alternative to Flutter’s Circle Avatar Widget
Installation
Add this to your package’s pubspec.yaml file:
dependencies:
circular_profile_avatar: ^0.1.4
and run
flutter packages get
Usage
CircularProfileAvatar(
radius: 100, // sets radius, default 50.0
backgroundColor: Colors.green, // sets background color, default Colors.white
borderWidth: 10, // sets border, default 0.0
initialsText: Text(
"AD",
style: TextStyle(fontSize: 40, color: Colors.white),
), // sets initials text, set your own style, default Text('')
borderColor: Colors.brown, // sets border color, default Colors.white
elevation: 5.0, // sets elevation (shadow of the profile picture), default value is 0.0
foregroundColor: Colors.brown.withOpacity(0.5), //sets foreground colour, it works if showInitialTextAbovePicture = true , default Colors.transparent
onTap: () {
print('adil');
}, // sets on tap
showInitialTextAbovePicture: true, // setting it true will show initials text above profile picture, default false
imagePath:
'https://avatars0.githubusercontent.com/u/8264639?s=460&v=4'), //sets image path, it should be a URL string. default value is empty string, if path is empty it will display only initials
)
If this project help you reduce time to develop, you can give me a cup of coffee 🙂
GitHub
https://github.com/ch-muhammad-adil/flutter-circular_profile_avatar
