How to Give an Image Border Radius in Flutter?

To give an image a border radius in Flutter, a common and flexible method involves wrapping the Image widget within a Container widget and applying the border radius to the Container's decoration.

This approach is highlighted in typical Flutter development steps, including:

• Creating necessary application structure (Step 1: Create a New Flutter Application, Step 2: Define the StatefulWidget, Step 3: Use the Build Method).
• Utilizing core layout widgets (Step 4: Create a Container Widget).
• Applying visual styling properties (Step 5: Set the BorderRadius).
• Structuring the layout with padding and content (Step 6: Add Padding and Child Widgets).

Using a Container Widget

The Container widget is highly versatile for styling and layout. By giving the Container a BoxDecoration with a specific borderRadius, you can effectively clip its child (the Image) to the desired shape.

Here are the key steps when using a Container:

1. Create a Container: Instantiate a Container widget.
2. Set the decoration: Provide a BoxDecoration to the Container's decoration property.
3. Define borderRadius: Inside the BoxDecoration, set the borderRadius property. You can use BorderRadius.circular() for uniform radius or BorderRadius.only() for specific corners.
4. Set the child: Place your Image widget inside the Container's child property.
5. Clip the image: It's important to ensure the image is clipped by the decoration. You can achieve this by ensuring the Container has no color property set directly on it (as color on Container is incompatible with decoration), and instead setting the color (if needed) within the BoxDecoration. For image clipping specifically, setting a border radius on the BoxDecoration handles the clipping of its child image.

Code Example

Here's a practical example demonstrating how to wrap an Image in a Container to apply a border radius:

import 'package:flutter/material.dart';

class RoundedImageExample extends StatelessWidget {
  const RoundedImageExample({super.key}); // Step 2 & 3: Define & Build Method context

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rounded Image'),
      ),
      body: Center( // Step 6: Layout with Padding/Alignment
        child: Container( // Step 4: Create a Container Widget
          width: 150, // Example width
          height: 150, // Example height
          decoration: BoxDecoration( // Step 5: Set the BorderRadius
            borderRadius: BorderRadius.circular(75), // Apply uniform circular radius
            // Optionally add a border:
            // border: Border.all(color: Colors.blueAccent, width: 4),
            image: const DecorationImage( // Place the image within decoration
              image: NetworkImage('https://via.placeholder.com/150'), // Your image source
              fit: BoxFit.cover, // Ensure image covers the container
            ),
          ),
          // If using a color on the Container, it conflicts with decoration.
          // color: Colors.grey[300], // Avoid this line if using BoxDecoration image
          // child: Image.network(...) // Often better to use decoration.image for clipping
        ),
      ),
    );
  }
}

// Typical main function setup (Step 1: Create Application context)
// void main() {
//   runApp(MaterialApp(home: RoundedImageExample()));
// }

In this example:

• We create a Container with a fixed size.
• Its decoration property uses BoxDecoration.
• BorderRadius.circular(75) gives it a perfectly circular shape (radius is half of the width/height).
• The image property within BoxDecoration is set to DecorationImage, which holds the ImageProvider (like NetworkImage or AssetImage). This is a crucial step when using BoxDecoration for images, as it handles the clipping correctly.

Alternative: Using ClipRRect

While the Container with BoxDecoration is common, especially when you need borders or shadows, the ClipRRect widget is another direct way to clip a widget, including an image, into a rounded rectangle.

• Wrap your Image widget directly with a ClipRRect.
• Use the borderRadius property of ClipRRect to define the desired curve.

ClipRRect(
  borderRadius: BorderRadius.circular(20.0), // Set your desired radius
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 150,
    height: 150,
    fit: BoxFit.cover,
  ),
)

Both Container and ClipRRect are effective ways to achieve rounded corners for images in Flutter, with Container offering more extensive styling options within its BoxDecoration.