What is the Custom Clipper widget in Flutter?

Flutter is an extensive framework developed by Google to create beautiful, multi-platform applications using a single codebase. It is free and was released in May 2017.

Custom Clipper

Custom Clipper in Flutter allows us to create custom shapes. Using this feature, we can create various curve shapes and add them to our UI design. It is a property that allows us to clip the widget’s shape into any shape we want. It uses the unused areas of widgets to get the shape.

Code

We can create a new file for the Custom Clipper. Let’s name it customclipper.dart for creating the custom shape. Here is the code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
  
class CustomClipperShape extends CustomClipper<Path>{
  @override
  Path getClip(Size s) {
    //declared the variavles
    double h = s.height;
    double w = s.width;
  // created a path
    var p = Path();
    p.lineTo(0, h-20);
    p.quadraticBezierTo(w/2, h, w, h-20);
    p.lineTo(w, 0);
    p.close();
    return p;
  }
  
  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }

In the main.dart, we have to add the following code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'customclipper.dart';
void main() {
runApp(MyApp());
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
		//clippath added here and above defined clipper used
		flexibleSpace: ClipPath(
		clipper: CustomClipperShape(),
		child: Container(
			height: 150,
			width: MediaQuery.of(context).size.width,
			color: Colors.white,
			child: Center(child: Text("CUSTOM CLIPPER",
									style: TextStyle(fontSize: 20,
																	color: Colors.blue),)),
		),
		),
	),
	body: Container(),
	);
}
}

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)