ClipPath: Clip Widgets to Custom Shapes
ClipPath is a stencil for your widgets. It cuts a child widget to a custom-defined shape, hiding anything outside the lines. Use it for complex shapes like waves or stars, but avoid it for simple rectangles or circles—it's expensive.
Why it exists
Standard widgets offer basic shapes like rectangles and circles. To create unique, brand-specific UIs with custom curves, angles, or other non-standard boundaries, a more flexible clipping mechanism is needed. ClipPath solves this by allowing any widget to be masked by an arbitrary shape.
The mental model
ClipPath is a stencil. It's a widget that wraps a child. You give ClipPath a set of instructions for drawing a shape (a Path) via a CustomClipper. The ClipPath then places this invisible stencil over its child, and only the parts of the child visible through the stencil's cutout are actually painted on the screen. Everything else is clipped away.
How it works
ClipPath takes a child widget and a clipper property. The clipper must be an instance of a class that extends CustomClipper<Path>. This custom class has two required methods: getClip(), which must return the Path to clip with, and shouldReclip(), which tells Flutter whether the path needs to be recalculated. When Flutter paints the widget, it calls getClip() to get the shape and then prevents the child from painting anywhere outside that Path.
When to use it
Use ClipPath when you need to clip a widget to a complex, non-standard shape that cannot be achieved with simpler widgets. Examples include creating a container with a curved or diagonal edge, making an image appear in the shape of a star or a hexagon, or creating custom background effects with unique boundaries.
When not to use it
Do not use ClipPath for simple shapes. The documentation explicitly warns that it is an expensive operation. For clipping to a rectangle, use ClipRect. For an oval or circle, use ClipOval. For a rounded rectangle, use ClipRRect. Using ClipPath for these common cases is a performance anti-pattern that can lead to jank, especially during animations.
One canonical example
A common use case is creating a banner with a diagonal slice. You would wrap an Image or Container widget with ClipPath. The CustomClipper's getClip method would then define a Path that starts at the top-left corner, goes to the top-right, then down to the bottom-right, then to a point partway up the left edge, and finally closes the path, creating a four-sided polygon with one diagonal side.
Interview question
For which scenario is ClipPath the most suitable widget to use?
- a.Creating a perfectly circular avatar image for a user profile
- b.Optimizing rendering performance for all clipping operations in an application
- c.Clipping a widget into a complex, custom shape not achievable with basic clip widgetsCorrect
- d.Applying a uniform border radius to an image
Why? this is the answer
ClipPath is specifically designed for complex, non-standard shapes that cannot be achieved with simpler widgets like ClipRect, ClipOval, or ClipRRect. It is an expensive operation, making option B incorrect as it's not for general performance optimization.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles