profile photo

How to make a profile photo with a badge in Flutter

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:

  1. A Container widget that displays an image. The Container has a width and height of 100 pixels, and its decoration property is set to a BoxDecoration with a shape of BoxShape.circle, which makes the image display as a circle. The image itself is set using the image property of a DecorationImage object, which is passed to the BoxDecoration. The image property is set to a NetworkImage object with the URL of the image to display. The fit property of the DecorationImage is set to BoxFit.cover, which scales the image to cover the entire container.
  2. A Positioned widget that displays a red circular badge with the number “1” in the bottom right corner of the Stack. The Positioned widget is given a right and bottom value of 0, which positions it at the bottom right corner of the Stack. Inside the Positioned widget is a Container with a width and height of 20 pixels and a decoration property set to a BoxDecoration with a shape of BoxShape.circle, which makes it display as a circle. Inside this Container is a Text 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

profile photo

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