ClipRRect and ClipPath in Flutter

Introduction

ClipRRect and ClipPath help you cut or shape parts of your app's pictures or widgets. This makes your app look neat and stylish.

You want to make images with rounded corners like photos in a gallery.

You want to create custom shapes for buttons or cards.

You want to hide parts of a widget that go outside a certain shape.

You want to add creative designs by clipping widgets into special shapes.

Syntax

Flutter

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: WidgetToClip(),
)

ClipPath(
  clipper: CustomClipper<Path>(),
  child: WidgetToClip(),
)

ClipRRect clips a widget with rounded rectangle corners.

ClipPath clips a widget using any shape you define with a CustomClipper.

Examples

This clips an image with rounded corners of radius 20.

Flutter

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network('https://example.com/photo.jpg'),
)

This clips a container into a triangle shape using a custom clipper.

Flutter

ClipPath(
  clipper: TriangleClipper(),
  child: Container(color: Colors.blue, width: 100, height: 100),
)

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Sample App

This app shows two clipped widgets stacked vertically. The first is an image with rounded corners using ClipRRect. The second is an orange box clipped into a star shape using ClipPath and a custom clipper.

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ClipRRect and ClipPath Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(30),
                child: Image.network(
                  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                  width: 150,
                  height: 150,
                  fit: BoxFit.cover,
                ),
              ),
              const SizedBox(height: 40),
              ClipPath(
                clipper: StarClipper(),
                child: Container(
                  color: Colors.orange,
                  width: 150,
                  height: 150,
                  alignment: Alignment.center,
                  child: const Text('Star Shape', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;
    Path path = Path();
    path.moveTo(w * 0.5, 0);
    path.lineTo(w * 0.617, h * 0.35);
    path.lineTo(w, h * 0.38);
    path.lineTo(w * 0.69, h * 0.62);
    path.lineTo(w * 0.81, h);
    path.lineTo(w * 0.5, h * 0.77);
    path.lineTo(w * 0.19, h);
    path.lineTo(w * 0.31, h * 0.62);
    path.lineTo(0, h * 0.38);
    path.lineTo(w * 0.38, h * 0.35);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Important Notes

ClipRRect is simpler and good for rounded corners.

ClipPath is powerful for any custom shape but needs you to define the shape path.

Clipping can affect performance if overused or on large widgets.

Summary

ClipRRect clips widgets with rounded rectangles.

ClipPath clips widgets with any shape you create.

Use clipping to make your app look polished and creative.