Contents
Flutter ClipPath Widget | UI Clippers in Flutter
Flutter ClipPath widget is another part of the UI Clipper widget. ClipPath adds on to Flutter ClipRect & Flutter ClipOval and defines a specific path to clip on the UI.
This is done through the CustomClipper class that is defined as part of the clipper attribute. You can find how to create this custom clipper in the following sections.
ClipPath Basics
To begin with, we will create a simple Stateful Widget(See the final section for the complete example application). Once that is done, use the Class ClipPath to define the widget.
ClipPath()
ClipPath widget is a subset of the CustomClipper class and can take in any shape and the UI is clipped accordingly. Just like the ClipRect and ClipOval Widgets, it is clear as to what the respective widgets will do(One clip the UI in Rectangle shape and the other in Oval shape). The ClipPath however, needs a specific path to be defined.
In the coming up section, we can see about how to define this CustomClipper class and use it as part of the ClipPath widget.
CustomClipper Widget in ClipPath
The primary use of this CustomClipper Class is to define what Path that has to be clipped. Doing so is really easy. Just extend or inherit the CustomClipper class and override its getClip() & shouldReclip() methods. A sample class is as given below.
class LinePathClass extends CustomClipper { @override Path getClip(Size size) {} @override bool getClip(Size size) {} }
The getClip() method takes in the Path as its return type. It’s important to define the Path widget in this method. A sample Path class is as given below.
var path = new Path(); path.lineTo(x, y); return path;
In the code snippet above, each path.lineTo() creates a line from the point X to point Y. This way, the lines can be generated and linked with each other to form the Path. Once that is done, return the Path to create the custom clipped Path.
ClipPath – Properties
The 2 important properties of the ClipPath widget includes the
- Clipper: Defines the CustomClipper class. It takes in the custom class which defines the path. Normal call to the custom clipper path is its value. A sample code is given as part of the ClipPath App example in the next section.
- child: The actual child which gets clipped! It is better to make use widgets like Center, Align Widget to create a better Clip UI effect. To see how the ClipPath UI works, take a look at the sample App in the next section.
ClipPath Example Application
The below code creates a simple Login like a page with UI ClipPath defined. Check out the code and the example app generated below.
import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(ClipPathApp()); class ClipPathApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample Divider Widget', home: ClipPathWidget(), ); } } class ClipPathWidget extends StatefulWidget { ClipPathWidget({ Key key }): super(key: key); @override _ClipPathWidgetState createState() => _ClipPathWidgetState(); } class _ClipPathWidgetState extends State { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Sample ClipPath Widget"), backgroundColor: Colors.black45, ), body: Center( child: Stack( children: [ ClipPath( clipper: LinePathClass(), child: Container( color: Colors.red, ), ), Container( child: Column( children: [ Image.network("https://cdn.pixabay.com/photo/2017/06/13/12/53/profile-2398782_960_720.png", width: 100.0, height: 100.0, ), Text("John Doe", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), ) ], ), ) ], ), ) ); } } class LinePathClass extends CustomClipper { @override Path getClip(Size size) { // TODO: implement getClip var path = new Path(); path.lineTo(0, 300); path.lineTo(325, 0); path.lineTo(size.width - 300, size.height - 500); return path; } @override bool shouldReclip(CustomClipper oldClipper) { // TODO: implement shouldReclip return false; } }

ClipPath Conclusion
Effective use of the ClipPath Widget is helpful in creating awesome UI. There are different paths other that lines that can be used. It is important to play with all these values and try to generate the perfect ClipPath!
Drop-in any comments in the section below.
“Learn and be curious”