Clipping an Image Inside a Rounded Container in Flutter

When designing a UI in Flutter, you often use rounded containers to create visually appealing layouts. However, if you place an image inside a rounded container, you may notice that the image does not automatically follow the container’s shape—it remains rectangular and can overflow beyond the rounded corners.

Why Does This Happen?

Flutter does not clip child widgets inside a Container by default. Even if the container has borderRadius, the image inside remains unaffected unless we explicitly apply clipping.

Solution: Using clipBehavior

To ensure that the image conforms to the rounded shape of the container, we use the clipBehavior property.

Full Code with Clipping:

import 'package:flutter/material.dart';

class ClipImage extends StatefulWidget {
  const ClipImage({super.key});

  @override
  State<ClipImage> createState() => _ClipImageState();
}

class _ClipImageState extends State<ClipImage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            // without clipping
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 150,
                  width: 150,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Image.asset('assets/images/flutter.jpg'),
                ),
                SizedBox(height: 10),
                Text('Without Clipping', style: TextStyle(fontSize: 18)),
              ],
            ),
            // with clipping
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 150,
                  width: 150,
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Image.asset('assets/images/flutter.jpg'),
                ),
                SizedBox(height: 10),
                Text('With Clipping', style: TextStyle(fontSize: 18)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
Dart

Output:

Best Clipping Option

Among the available options (Clip.none, Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer), Clip.antiAlias is the best choice because:
✅ It smooths edges without extra performance cost.
✅ It ensures the image conforms to the container’s shape.

Conclusion

By default, images inside rounded containers do not follow the container’s shape and can overflow. To fix this, using clipBehavior: Clip.antiAlias ensures smooth, properly clipped images while maintaining performance. This small change can greatly improve UI consistency in Flutter applications.

Leave a Comment

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

Scroll to Top