How to do Rounded Corners Image in Flutter : Know Various Methods

Do you want to create rounded corners on images in flutter? If yes then in this tutorial you will learn how to make rounded corners image in flutter using the various method.

How to use Image in Flutter

There are two ways you can use images in a flutter. The first is the image saved on the disk. It means the path of the image is in the local directory. The second is the fetching image from the Network Url.

The syntax for fetching images locally is below.

Image.asset('your_image_name')

And the syntax for fetching images from the network is below.

Image.network('Url address of the image')

In this entire tutorial, I will use the image provided on the internet. So that it will be easy for you to understand all the examples given here. I am using the below image.

Methods to Create Rounded Corners Image in Flutter

In this section, you will know all the methods that you will use to create beautifully rounded corners on the image in a flutter. Let’s get started.

Method 1: Using ClipRRect Flutter class

If you want to draw rounded corners on the image then you can use the ClipRRect() class. It clips the image using the Rounded Rectangular border. You have to use two main attributes. One is the borderRadius and child. The child attribute will contain the URL of the image path.

Execute the below lines of code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
              child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: SizedBox.fromSize(
              size: Size.fromRadius(200),
              child: Image.network(
                "https://www.codethebest.com/wp-content/uploads/2022/03/sample-image.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ))),
    );
  }
}

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

Output

Method 2: Rounded Corners Image using CircleAvatar

The second method to create rounded corners around the image is using the CircleAvatar() flutter widget. You have to define just two attributes radius and backgroundImage. The radius is of type double.

Run the below lines of code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
              child: (CircleAvatar(
            radius: 400,
            backgroundImage: NetworkImage(
              "https://www.codethebest.com/wp-content/uploads/2022/03/sample-image.jpg",
            ),
          )))),
    );
  }
}

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

Output

Method 3: Using Flutter Container

The third method to create rounded corners in an image in flutter is the use of a Container. A flutter container is the most used widget in the flutter. It has a decoration attribute that allows to manipulate it.

In this example, you have to use BoxDecoration and inside it, you will define the image decoration attribute.

Execute the below lines of code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: Container(
              width: 350.0,
              height: 300.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                        'https://www.codethebest.com/wp-content/uploads/2022/03/sample-image.jpg')),
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
              ),
            ),
          )),
    );
  }
}

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

Output

Conclusion

These are the ways to create a rounded corner image in your flutter App. All these methods are very simple to implement. You can also see that there is a difference in radius for each corner of the image for the different methods. So it’s up to you to choose which method you want to implement.

I hope this tutorial has helped in understanding to decorate a beautiful image. If you have any doubt then you can contact us for more help.