Flutter – Custom Clipper
In flutter, we have widgets and properties that help to create custom shapes. In this article, we will learn about a property called Custom Clipper and we will also implement it to create a curve shape in our UI design.
What is a Custom Clipper?
Custom Clipper is a property that helps to clip the widget into any shape we want. It clips unused areas of the container to get the desired shape.
Now we will create a curve bottom shape appbar using a custom clipper.
Step 1: custom_shape.dart file
Explanation: In this file, our custom shape class extends to a custom clipper. Custom clipper uses two override methods –
- getclip(): We define here how we want to clip-path.
- shouldReclip(): It returns bool value whether we want to reclip the widget or not.
The getClip() method is used to customize the shape. To give a curve shape we have used path.quadraticBezierTo feature and we have also passed path.lineTo with certain height and width. We do not want to reclip so we have return true in shouldReclip() method.
Step 2: main.dart file
Explanation: In this main.dart file we have created a stateful widget first. Afterward, we have used the property of an appbar called flexible space. In this flexible space property, we have a container with height, width, color, and text. We have wrapped this container with clip path. Clip path has a property called clipper. In the clipper property, we have passed the Custom shape class so that it can get accessed to custom_shape.dart file and give us the desired shape.