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.

Practice

1. What is the main purpose of the ClipRRect widget in Flutter?

easy

A. To add padding around a widget

B. To clip a widget with a custom path shape

C. To animate a widget's size

D. To clip a widget with rounded rectangle corners

Solution

1. Step 1: Understand ClipRRect usage

   The ClipRRect widget clips its child using a rounded rectangle shape.

2. Step 2: Compare with other options

   ClipPath clips with custom shapes, padding adds space, animation changes size.

3. Final Answer:

   To clip a widget with rounded rectangle corners -> Option D

4. Quick Check:

   ClipRRect = Rounded rectangle clip [OK]

Hint: ClipRRect always clips with rounded rectangles [OK]

Common Mistakes:

• Confusing ClipRRect with ClipPath
• Thinking ClipRRect adds padding
• Assuming ClipRRect animates widgets

2. Which of the following is the correct syntax to clip a widget with rounded corners using ClipRRect?

easy

A. ClipRRect(borderRadius: BorderRadius.circular(10), child: Text('Hello'))

B. ClipRRect(radius: 10, child: Text('Hello'))

C. ClipRRect(cornerRadius: 10, child: Text('Hello'))

D. ClipRRect(borderRadius: 10, child: Text('Hello'))

Solution

1. Step 1: Recall ClipRRect property names

   The correct property for rounded corners is borderRadius with a BorderRadius.circular() value.

2. Step 2: Check syntax correctness

   ClipRRect(borderRadius: BorderRadius.circular(10), child: Text('Hello')) uses correct property and value type; others use wrong property names or types.

3. Final Answer:

   ClipRRect(borderRadius: BorderRadius.circular(10), child: Text('Hello')) -> Option A

4. Quick Check:

   borderRadius with BorderRadius.circular() is correct [OK]

Hint: Use borderRadius: BorderRadius.circular() for ClipRRect [OK]

Common Mistakes:

• Using radius or cornerRadius instead of borderRadius
• Passing integer directly instead of BorderRadius.circular()
• Omitting the child widget

3. What will be the visual result of this Flutter code snippet?

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

medium

A. A blue square with rounded corners of radius 20

B. A blue square with sharp corners

C. A blue circle with radius 20

D. A blue rectangle with no clipping

Solution

1. Step 1: Analyze ClipRRect effect

   The ClipRRect clips the child container with rounded corners of radius 20.

2. Step 2: Understand container shape

   The container is a 100x100 square colored blue, so clipping rounds its corners.

3. Final Answer:

   A blue square with rounded corners of radius 20 -> Option A

4. Quick Check:

   ClipRRect rounds corners = blue square with rounded corners [OK]

Hint: ClipRRect rounds corners, does not make circles [OK]

Common Mistakes:

• Thinking ClipRRect creates circles
• Ignoring borderRadius effect
• Assuming no clipping happens

4. Identify the error in this Flutter code using ClipPath:

ClipPath(
  clipper: CustomClipper(),
  child: Container(color: Colors.red, width: 100, height: 100),
)

medium

A. Container cannot be a child of ClipPath

B. clipper property should be a Widget, not a CustomClipper

C. CustomClipper is an abstract class and cannot be used directly

D. Colors.red is not a valid color

Solution

1. Step 1: Understand CustomClipper usage

   CustomClipper is an abstract class; you must create a subclass implementing its methods.

2. Step 2: Check clipper property type

   The clipper property requires an instance of a subclass of CustomClipper, not the abstract class itself.

3. Final Answer:

   CustomClipper is an abstract class and cannot be used directly -> Option C

4. Quick Check:

   CustomClipper must be subclassed before use [OK]

Hint: CustomClipper must be subclassed, not used directly [OK]

Common Mistakes:

• Using CustomClipper directly without subclassing
• Confusing clipper property type
• Thinking Container can't be child

5. You want to clip a widget into a triangle shape using Flutter. Which approach correctly uses ClipPath to achieve this?

hard

A. Use ClipRRect with borderRadius set to 0

B. Use ClipPath with a CustomClipper that defines a triangle path

C. Use ClipOval with a rectangular child

D. Use Container with padding and background color

Solution

1. Step 1: Understand ClipPath flexibility

   ClipPath allows clipping with any shape by defining a custom path in a subclass of CustomClipper.

2. Step 2: Identify correct method for triangle shape

   To clip a triangle, you must create a CustomClipper that draws a triangle path and pass it to ClipPath.

3. Step 3: Eliminate incorrect options

   ClipRRect only clips rounded rectangles, ClipOval clips ovals/circles, and Container does not clip shapes.

4. Final Answer:

   Use ClipPath with a CustomClipper that defines a triangle path -> Option B

5. Quick Check:

   ClipPath + CustomClipper = any shape clip [OK]

Hint: ClipPath + CustomClipper = clip any shape [OK]

Common Mistakes:

• Trying to clip triangle with ClipRRect
• Using ClipOval for non-oval shapes
• Confusing padding with clipping