Flutter clip image with examples - ClipRect, ClipRRect, ClipOval, and ClipPath
Clipper widgets are used to clip the child widget in different shapes and sizes. It prevents the child from painting outside its bounds. In this tutorial, we will be learning with examples of how to clip images in Flutter in a rectangular shape (ClipRect), circular shape (ClipRRect), oval shape (ClipOval), and triangular shape (ClipPath).
Images showing the implementation of clipping in Flutter. 1) Clipping an image in rectangle with ClipRect 2) Clipping an image circular with ClipRRect 3) Clipping an image in triangular shape with Custom Clipper 4)Clipping an image oval with ClipOval
1. ClipRect - Clips the image in rectangle
Implementation of ClipRect Flutter. Before and after clipping
ClipRect prevents the child from painting outside the box. The size and location of the clipper can be customized by changing the arguments in the clipper. The code above shows how to clip an image with a rectangular shape. You can wrap the image widget with an Align widget to easily position the image inside the clipper. The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the clipper. Here we are clipping the image at the center.
2. ClipRRect - Clips the image with rounded corners or clip circle
Implementation of ClipRRect. Before and after clipping
ClipRRect can be used to clip image circle or clip the edges with a circular radius. The extra R stands for rounded. The borderRadius property can be used to change the radius of the rounded corners.
3. ClipOval - Clips the image in oval
Implementation of ClipOval. Before and after clipping
ClipOval can be used to clip the child widget in an oval shape. The clipper uses the widgets bounding box to determine the width and height of the oval. Therefore, if the width and height of the child widget are equal, then it will be a circle.
4. ClipPath - Clips image in custom shape
Implementation of ClipPath. Before and after clipping
ClipPath can be used to clip the child widget in custom shape using a custom Clipper defined. In this code, we clip the widget in a triangle shape. Here we are supplying a custom TriangleClipper class to the clipper attribute. If you want to know more about how a custom clipper can be defined to achieve the desired shape, follow the detailed tutorial on custom clippers here.
Clipping using clippy_flutter package in Flutter
A guide on how to clip images using clippy_flutter package in Flutter
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter
Custom Clipper in Flutter
A guide on how to create a custom clipper in Flutter