FLUTTER

Clipping custom shapes using clippy_flutter package in Flutter

In this tutorial we will see how to use clippy_flutter package to clip widgets in different shapes. Some of the common shapes that can be clipped using the package in Flutter are Arc, Arrow, Bevel, ButtCheek, Chevron, Diagonal, Label, Message, Paralellogram, Point, Polygon, Rabbet, Rhombus, Star, Ticket, Trapezoid, Triangle. We will see how to implement clipping of some of the shapes in Flutter.

Install

The first step is to add the package clippy_flutter to pubspec.yaml as shown below. Run flutter pub get to install the package.

Import

Import the package at the top of the dart file.

Diagonal

The Diagonal widget can be used to clip a widget diagonally. The height of the clipping can be given using the clipHeight property of the Diagonal widget. The direction of the cut can be controlled using position property. Here we give the position as DiagonalPosition.BOTTOM_RIGHT, so the clipping will be done from bottom left to bottom right. You can give the position property as DiagonalPosition.BOTTOM_LEFT to reverse the clipping direction. TOP_LEFT and TOP_RIGHT can be used to clip the top of the child widget.

Arc

The Arc widget can be used to clip a widget in the shape of an arc or an arch. The height of the arc can be given using the height property of the Arc widget. The shape of the arc can be controlled using the arcType property. The acceptable values for arcType are ArcType.CONVEY and ArcType.CONVEX.

Chevron

Chevron is a complex shape. The Chevron widget can be used to clip a widget in the shape of a chevron. The height of the chevron can be given using the height property of the Chevron widget. The direction of the chevron can be controlled using the edge property. The value of the edge decides the direction in which a chevron is pointing to. Here we have used Edge.RIGHT. The acceptable values of the edge propert are EDGE.RIGHT, EDGE.LEFT, EDGE.TOP and EDGE.BOTTOM.

Ticket

Ticket shape is another complex shape. The Ticket widget can be used to clip a widget in the shape of a ticket. The hradius of the ticket can be given using the radius property of the Ticket widget.