FLUTTER

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

Contents

1. ClipRect

2. ClipRRect

3. ClipOval

4. ClipPath

5. Interactive Example

1. ClipRect - Clips the image in rectangle

Implementation of ClipRect Flutter. Before and after clipping

Code

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

Code

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

Code

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

Code

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.