How To Make Rounded Profile Pictures In Flutter

Flutter category image

Introduction

For your Instagram clone or your member app: Here is how to make rounded profile pictures in Flutter. An easy and fast solution for all app types!

In this article, I am going to show you how to make rounded profile pictures in Flutter apps. Why? Because it’s state of the art on many well-known websites. Even Medium uses them, just take a look here:

Screenshot of the Medium homepage with rounded author profile pictures
Screenshot of the Medium homepage with rounded author profile pictures

And it’s so simple to accomplish. Look at this small code example:

Dart
@override
Widget build(BuildContext context) {
  return Center(
      child: SizedBox(
          width: 256,
          height: 256,
          child: ClipOval(
              child: Image.asset(
            "resources/images/loc2.jpg",
            fit: BoxFit.cover,
          ))));
}

The ClipOval widget will crop your image the way you want it. If you don’t want a circle, you can play around with the width and height properties. Also consider using a different fit setting in case you want your image to show only a portion of the entire image.

A not perfectly square image cropped to a square circle
A not perfectly square image cropped to a square circle

My example image is slightly higher than wider. That’s why there is a flat spot at the top of the circle. When you want a nicely-shaped circle, you need an image with identical width and height.

Here is another code example:

Dart
Widget _buildImageButtonWithFallback(String base64Image) {
  final bytes = base64Decode(base64Image);
  return Container(
      width: 70,
      height: 70,
      decoration: const ShapeDecoration(
          shape:
              CircleBorder(side: BorderSide(color: Colors.black, width: 1))),
      child: ClipOval(
        child: Image.memory(bytes,
            fit: BoxFit.cover,
            errorBuilder: (context, error, stackTrace) =>
                const Icon(Icons.person)),
      ));
}

In this approach, we even have a CircleBorder around the picture and the image is loaded from a base64 string. When you want to go really fancy, use FadeInImage with a placeholder while the actual image loads. This works for image resources and network downloads.

And if you are not into circle shapes, try ClipRect to crop your image in a rectangular or square shape.

Conclusion

In this article, we learned how to make rounded profile pictures in Flutter apps. In addition, I gave you further tips on how to work with images and cropping them.


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!