How to Make Rounded Profile Pictures in Flutter?

In this guide, we are going to use four different ways to create rounded profile pictures in Flutter.

CircleAvatar, ClipOval, BoxDecoration, and Custom Clippath are the 4 different ways to create a full-rounded profile image in your Flutter app.

If you haven’t already installed Flutter, you can follow the official: Flutter Installation Guide. to set it up.

Let’s get started.

Table of Contents

• 5 Ways to Make Rounded Profile Pictures in Flutter
  • 1. Using the CircleAvatar widget
  • 2. Using the ClipOval widget
  • 3. Using the BoxDecoration with borderRadius
  • 4. Using a custom ClipPath widget
• Output
• Conclusion

5 Ways to Make Rounded Profile Pictures in Flutter

Learn to create visually appealing rounded profile pictures in Flutter app, enhancing the user experience with modern circular avatar images.

Sure, here are complete code examples for each of the methods to create rounded profile pictures in Flutter:

1. Using the CircleAvatar widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Profile Picture Example'),
        ),
        body: Center(
          child: CircleAvatar(
            radius: 50.0,
            backgroundImage: NetworkImage(
              'https://picsum.photos/id/237/300/300',
            ),
          ),
        ),
      ),
    );
  }
}

• The CircleAvatar widget is a built-in Flutter widget that provides a circular avatar with an image or background color.
• It automatically handles the clipping and rounding of the image or background.

2. Using the ClipOval widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Profile Picture Example'),
        ),
        body: Center(
          child: ClipOval(
            child: Image.network(
              'https://picsum.photos/id/237/300/300',
              width: 100.0,
              height: 100.0,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

• The ClipOval widget clips its child widget into an oval shape.
• You can use it in combination with an Image widget or a Container with a background image.

3. Using the BoxDecoration with borderRadius

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Profile Picture Example'),
        ),
        body: Center(
          child: Container(
            width: 100.0,
            height: 100.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: NetworkImage('https://picsum.photos/id/237/300/300'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• You can use the BoxDecoration widget along with the borderRadius property to create a rounded rectangle.
• By setting a large borderRadius, you can make the container look circular.

4. Using a custom ClipPath widget

ClipPath widget’s purpose and functionality, highlight its ability to create custom shapes for clipping child widgets in Flutter.

It emphasizes the widget’s significance in enabling unique designs and layouts with precise control over visual presentation.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Profile Picture Example'),
        ),
        body: Center(
          child: ClipPath(
            clipper: CircleClipper(),
            child: Image.network(
              'https://picsum.photos/id/237/300/300',
              width: 100.0,
              height: 100.0,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..addOval(Rect.fromCircle(
        center: Offset(size.width / 2, size.height / 2),
        radius: size.width / 2,
      ));
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

• If you need more control over the shape of the profile picture, you can create a custom ClipPath widget.
• This approach involves defining a custom Path and using it to clip the image or background.

Check Out:

• How to Remove Iconbutton Padding in Flutter?
• How to Add Border to Container in Flutter?
• How to Add Space Between Rows in Flutter?
• How to Show Custom Toast Messages in Flutter?

Output

Conclusion

In each example, the key part is using the respective widget or technique to create the rounded or circular shape for the profile picture.

The Center widget is used to position the profile picture in the center of the screen, and the Scaffold and AppBar widgets provide a basic app structure.

By specifying a path, areas outside of it are clipped, providing precise control over the visual presentation of UI elements, enabling unique designs and layouts with intricate shapes.