Flutter Image with Rounded Corners

Display Image with Rounded Corners in Flutter

In this tutorial, we will learn how to display an Image with rounded corners in Flutter application.

You can get rounded corners for an Image widget by wrapping it in a ClipRRect widget.

Sample Code Snippet

Following is a quick sample code snippet you can use for wrapping Image widget in a ClipRRect for rounded corners.

ClipRRect(
  borderRadius: BorderRadius.circular(30.0),
  child: Image.network('https://googleflutter.com/sample_image.jpg'),
)

You may change the borderRadius value for different radii at corners.

Example: Image with Rounded Corners in Flutter

This is an example Flutter application where we display an image with rounded corners.

To recreate this example, create a basic Flutter application and replace main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: Center(
        child: Column(children: <Widget>[
          Text('Welcome to Flutter Tutorial on Image'),
          Padding(
            padding: EdgeInsets.all(30),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30.0),
              child:
                  Image.network('https://googleflutter.com/sample_image.jpg'),
            ),
          ),
        ]),
      ),
    );
  }
}

When you run this Flutter Application, you may observe an image displayed with rounded corners, as shown in the below screenshot.

Screenshot

Summary

In this Flutter Tutorial, we learned how to make rounded corners for an Image widget, with the help of well detailed example Flutter Application.