Flutter Image with Rounded Corners

When we define default Image widget than it render the image with sharp corners. To make the edges or corners rounded in Image widget we have to wrap the image inside ClipRRect widget. ClipRRect creates rounded rectangle clip child container.

Flutter Image with Rounded Corners:

1. Wrapping Image widget inside ClipRRect widget as its child and apply BorderRadius on it.

ClipRRect(
      borderRadius: BorderRadius.circular(28.0),
      child: Image.network(
        imageURL,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: ClipRRect(
      borderRadius: BorderRadius.circular(28.0),
      child: Image.network(
        imageURL,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )))));
  }
}

Screenshot: