Rounded Corner Image in Flutter

Rounded images or avatars are commonly used in many mobile applications, including those built with Flutter. There are several ways to create rounded images in Flutter, some of which include:

1. Using the ClipRRect widget: As I mentioned earlier, the ClipRRect widget can be used to clip an image and create rounded corners.
2. Using the Container widget with BoxDecoration: You can use the Container widget to create a container for your image, and then use BoxDecoration to set the shape property to BoxShape.circle to create a circular avatar.
3. Using a CustomPainter: This is a more advanced method, but it allows you to create a custom shape for your avatar.
4. Using the CircleAvatar widget: This widget is specifically designed to create circular avatars. It takes an Image or Icon as a child and automatically clips it into a circle.
5. Using ClipOval: This is another way to clip an image into a circular shape, similar to CircleAvatar

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Material Package

A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

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

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut for creating a stateless or Stateful widget:  You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
    const RunMyApp({super.key});

    @override
    Widget build(BuildContext context) {
        return MaterialApp();
    }
}

Step 4: Working with Scaffold Widget

Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
    appBar: AppBar(
        title: Text('Grid Paper'),
    ),
    body: 
),

Step 5: Making a Rounded Image

Now we can simply use the following widgets and assign its parameter to make the image rounded.

1. Circular Image (without border)

Using CircleAvatar:

 CircleAvatar(
    radius: 48, // Image radius
    backgroundImage: AssetImage('assets/gfglogo.png'),
),

Using ClipRRect:

 ClipOval(
    child: SizedBox.fromSize(
        size: Size.fromRadius(48), // Image radius
        child: Image.asset('assets/gfglogo.png', fit: BoxFit.cover),
    ),
),

Output: Same for Both the Methods

2. Circular Image (with border)

Using CircleAvatar:

CircleAvatar(
    radius: 56, //radius of avatar
    backgroundColor: Colors.green, //color
    child: Padding(
        padding: const EdgeInsets.all(8), // Border radius
        child: ClipOval(child: Image.asset('assets/gfglogo.png')),
    ),
)

Using ClipRRect:

 Container(
    padding: EdgeInsets.all(8), // Border width
    decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle),
    child: ClipOval(
        child: SizedBox.fromSize(
            size: Size.fromRadius(48), // Image radius
            child: Image.asset('assets/gfglogo.png', fit: BoxFit.cover),
        ),
    ),
)

Output: Same for Both the Method