Flutter ClipPath Widget | UI Clippers in Flutter

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”