Simple profile photo in Flutter
A profile photo widget in a Flutter app is a user interface element that displays a profile picture or avatar for a user. It is commonly used to display a user’s profile picture on their profile page or in other areas of the app where their identity is relevant.
To create a profile photo widget in a Flutter app, you can use the Container
widget and customize it with a background colour, a border, and a child widget to display the profile picture. You can use the CircleAvatar
widget to display the profile picture in a circular shape, or you can use the ClipRRect
widget to display the profile picture in a rectangular shape with rounded corners.
Here is an example of a simple profile photo widget in Flutter:
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.red,
width: 1.0,
),
borderRadius: BorderRadius.circular(50),
),
child: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(profilePictureUrl),
),
)
This example creates a Container
widget with a width and height of 50 pixels, a white background colour, and a red border. The CircleAvatar
widget is used as the child of the Container
widget to display the profile picture, and the radius of the CircleAvatar
is set to 25 pixels to fit within the bounds of the Container
. The backgroundImage
property of the CircleAvatar
widget is set to a network image located at the URL specified by profilePictureUrl
.
Here is an example of a profile photo widget in Flutter that uses the ClipRRect
widget to display the profile picture in a rectangular shape with rounded corners, without any decoration:
Container(
width: 50,
height: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
networkImageUrl,
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
)
This example creates a Container
widget with a width and height of 50 pixels. The ClipRRect
widget is used as the child of the Container
widget and it has a border radius of 10 pixels to give the profile picture rounded corners. The Image.network
widget is used as the child of the ClipRRect
widget to display the profile picture, and the fit
property is set to BoxFit.cover
to ensure that the entire profile picture is visible within the bounds of the Container
. The width
and height
properties of the Image.network
widget is set to 50 pixels to match the dimensions of the Container
.
In this version of the code, the Container
widget does not have any decoration, so it does not have a background colour or a border. The ClipRRect
widget is used to clip the profile picture to the desired shape and apply the rounded corners. The Image.network
widget is used to display the profile picture from a URL.
Create an image with a badge in Flutter
To create a circular image with a badge in Flutter, you can use the Container
widget and set the decoration
property to a BoxDecoration
with a shape
of BoxShape.circle
. Then, you can use the Stack
widget to overlay the badge on top of the circular image.
Here’s an example of how you could do this:
Stack(
children: [
Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(networkImageUrl),
fit: BoxFit.cover,
),
),
),
Positioned(
right: 0.0,
bottom: 0.0,
child: Container(
width: 20.0,
height: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
'1',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
),
),
),
),
),
],
)
This code creates a Stack
widget with two children:
- A
Container
widget that displays an image. TheContainer
has a width and height of 100 pixels, and itsdecoration
property is set to aBoxDecoration
with ashape
ofBoxShape.circle
, which makes the image display as a circle. The image itself is set using theimage
property of aDecorationImage
object, which is passed to theBoxDecoration
. Theimage
property is set to aNetworkImage
object with the URL of the image to display. Thefit
property of theDecorationImage
is set toBoxFit.cover
, which scales the image to cover the entire container. - A
Positioned
widget that displays a red circular badge with the number “1” in the bottom right corner of theStack
. ThePositioned
widget is given aright
andbottom
value of 0, which positions it at the bottom right corner of theStack
. Inside thePositioned
widget is aContainer
with a width and height of 20 pixels and adecoration
property set to aBoxDecoration
with ashape
ofBoxShape.circle
, which makes it display as a circle. Inside thisContainer
is aText
widget displaying the number “1”, which is given a white text colour and a font size of 12 pixels.
profile_photo used to display a profile photo
This is one of the new widgets which can be very useful in your app.
The profile_photo widget serves as a convenient and efficient way to display profile photos within an application. This widget can be slightly customized to suit the specific needs of your project or use case. One of the standout features of the profile_photo widget is the option to add a badge or other small graphic to the profile photo or image.
This can be an excellent way to highlight certain information or achievements associated with a particular profile, or simply to add a touch of personalization and visual interest. In addition to its core functionality and customizable options, the profile_photo widget is also highly intuitive and easy to use, making it a valuable tool for any developer or user looking to incorporate profile photos into their app or website.
This widget was created by Brad Varnum. Below is the original description of this project.
profile_photo
Creates a widget that was designed to be used to display a profile photo, but it could also be used in many other ways.
Features
- The ability to add a custom badge to the widget which could be used to display premium users for example
- Will automatically figure out a user’s initial to display if no image is given, but a name is
- ImageProvider as an image source to use either network or asset images
- onTap and onLongPress call backs
- Adjustable size
- Adjustable corner radius
- Adjustable outline width
- Adjustable background and outline colours
How to make profilephoto with a badge in Flutter
First, add the package to the pubspec.yaml file and then run flutter pub get.
dependencies:
profile_photo: ^1.0.1
To import this widget into your dart file use:
import 'package:profile_photo/profile_photo.dart';
In this case, we have several options available within the widget that we can utilize to customize and tailor its functionality to meet our specific needs and preferences.
These options provide us with a range of flexibility and control over how the widget functions and appears, allowing us to create a more personalized and effective solution.
- totalWidth: Width of the image, double value, ie. 100
- cornerRadius: corner radius, double value
- color: background colour, ie. Colors.red
- outlineColor: outline colour of the image, ie. Colors.blue
- outlineWidth: width of the outline, int value, ie. 5
- textPadding: padding of the text which will be displayed over the image, int value, ie. 10
- name: name which will be displayed over the image, String value
- showName: true or false, will show or hide the name, bool value, true or false
- fontColor: color of the text, ie. Colors.white
- nameDisplayOption: how the image will be displayed over the image. Options availabe:
- NameDisplayOptions.firstName
- NameDisplayOptions.dontChange
- NameDisplayOptions.initials
- NameDisplayOptions.lastName
- NameDisplayOptions.splitFullName
- fontWeight: weight of the name ie. FontWeight.w500
- image: the profile image, ie. AssetImage(‘assets/flutterassets_logo.png’)
- badgeAlignment: alignment of the badge. Options:
- Alignment.topLeft
- Alignment.topRight
- Alignment.topCenter
- Alignment.center
- Alignment.centerLeft
- Alignment.centerRight
- Alignment.bottomLeft
- Alignment.bottomRight
- Alignment.bottomCenter
- badgeSize: size of the badge, double value, ie. 40
- badgeImage: image used as a badge, ie. AssetImage(‘assets/gem_red.png’)
- onTap: example of use will be to open the profile
- onLongPress: popup to message user for example
profile_photo Example

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ProfilePhoto(
totalWidth: 120,
cornerRadius: 50,
color: Colors.blue,
image: const AssetImage('assets/flutterassets_logo.png'),
),
ProfilePhoto(
totalWidth: 200.5,
cornerRadius: 100.5,
color: Colors.blue,
outlineColor: Colors.red,
outlineWidth: 5,
textPadding: 10,
name: 'flutterassets.com example',
showName: true,
fontColor: Colors.white,
nameDisplayOption: NameDisplayOptions.initials,
fontWeight: FontWeight.w500,
image: const AssetImage('assets/flutterassets_logo.png'),
badgeAlignment: Alignment.bottomCenter,
badgeSize: 80.5,
badgeImage: const AssetImage('assets/gem_red.png'),
onTap: () {
// open profile for example
},
onLongPress: () {
// popup to message user for example
},
),
],
),
pub.dev
https://pub.dev/packages/profile_photo/example
GitHub
https://github.com/bradv123/profile_photo