Rounded Corners Image in Flutter

In this tutorial, we’ll look at just one of Flutter’s numerous image display options.

In particular, we will discover how to produce an image with rounded corners, a preferred design feature in contemporary mobile applications.

It’s crucial to realise that Flutter provides a variety of choices for showing images before moving on to the main topic. There are several widget classes available for each use scenario, and you can decide whether to display an image from a local file or a network URL.

In this tutorial, we’ll concentrate on obtaining a picture from a remote URL.

You may use the ClipRRect widget to clip an image with rounded rectangle corners in Flutter to give it rounded corners.

Additionally, you can utilise that widget as a Container to make handling images with height and width simple.

Here is syntax of the ClipRRect widget

ClipRRect(
  borderRadius: BorderRadius.circular(10.0), // Adjust the value to change the corner radius
  child: Image.network(
    'https://example.com/image.jpg', // Replace with your image URL
    width: 200, // Adjust the width as needed
    height: 200, // Adjust the height as needed
    fit: BoxFit.cover,
  ),
)

The borderRadius parameter in Flutter functions precisely the same way it does in CSS, so long as you are familiar with that language.

You can use shorthand notation to set various values for each corner or set the borderRadius to a specified number.

To begin your Dart file, don’t forget to import the required Flutter packages:

import 'package:flutter/material.dart';

Here it is example of that code.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Main App Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Image.network(
          'https://example.com/image.jpg', // Replace with your image URL
          fit: BoxFit.cover,
        ),
        ),
      ),
    );
  }
}

The image will have rounded corners when presented by surrounding the Image widget with ClipRRect.