Image with Rounded Corners in Flutter

In this tutorial, you will learn how to create an image with rounded corners in Flutter.

There are different ways of how you can display an image in Flutter. One of them is to fetch an image from a remote URL. A very simple example of how to fetch an image from a remote URL and display it in your Flutter mobile app will look like in the code example below.

import 'package:flutter/material.dart';

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

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

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://picsum.photos/250?image=9',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

If you run this code example, an image will appear as-is. If image corners are sharp, then they will appear sharp in the app as well.

Fetch image from URL. Example in Flutter.

Making Corners Rounded

If you want an image with rounded corners, then you can use the ClipRRect widget. The ClipRRect widget accepts borderRadius as a parameter. If you are familiar with CSS then borderRadius in Flutter works exactly the same as it works in CSS.

ClipRRect widget also has a child property which is going to be an image that we want to make with rounded corners.

ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Image.network(
          'https://picsum.photos/250?image=9',
          fit: BoxFit.cover,
        ),

Let’s have a look at a complete code example that will fetch an image from a remote URL and will display it with rounded corners.

Complete Code Example

import 'package:flutter/material.dart';

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

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

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Image.network(
          'https://picsum.photos/250?image=9',
          fit: BoxFit.cover,
        ),
        ),
      ),
    );
  }
}

Output:

Image with rounded corners. Example in Flutter.

I hope this Flutter tutorial was helpful for you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.

Happy mobile app development with Flutter 🙂!


Leave a Reply

Your email address will not be published. Required fields are marked *

Free Video Lessons

Enter your email and stay on top of things,

Subscribe!