How to Add Image with Rounded Corners in Flutter

Sometimes, rounded corners are more beautiful than sharp corners. In this Flutter tutorial, let’s check how to add an image with rounded corners in flutter.

I already have a post about adding rounded corners in flutter. As mentioned there, we have to use ClipRect class to create rounded corners. It’s very easy.

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),
  child: Image.network('https://cdn.pixabay.com/photo/2020/11/04/07/52/pumpkin-5711688_960_720.jpg'),
)

Following is the complete flutter example of image with rounded corners.

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image with Rounded Corner Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(30),
            child:ClipRRect(
              borderRadius: BorderRadius.circular(50.0),
              child: Image.network('https://cdn.pixabay.com/photo/2020/11/04/07/52/pumpkin-5711688_960_720.jpg'),
              ),),));
}

}

Following is the output of this flutter example.

I hope this flutter tutorial will be helpful for you.