Skip to content

Instantly share code, notes, and snippets.

@drkdelaney

drkdelaney/CustomCliper.dart

Last active December 21, 2022 00:25
Show Gist options
  • Save drkdelaney/cba2c97d4d25244e1de0708d6a3f1eac to your computer and use it in GitHub Desktop.
Save drkdelaney/cba2c97d4d25244e1de0708d6a3f1eac to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Derek Delaney revised this gist Dec 21, 2022. 1 changed file with 125 additions and 100 deletions.
    225 changes: 125 additions & 100 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -208,129 +208,154 @@ class MyHomePage extends StatelessWidget {
    appBar: AppBar(),
    body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
    children: [
    Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Expanded(
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 70,
    color: Colors.blue,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    Expanded(
    flex: 1,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    child: LayoutBuilder(builder: (context, constraints) {
    const numberOfSections = 5;
    const height = 70.0;
    const spaceBetween = 10;
    const overlapDistance = (height / 2) - spaceBetween;
    final width = (constraints.maxWidth / numberOfSections) +
    overlapDistance -
    spaceBetween;
    return Column(
    children: [
    SizedBox(
    height: height,
    child: Stack(
    children: <Widget>[
    Positioned(
    left: 0,
    child: SizedBox(
    width: width,
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: height,
    color: Colors.blue,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    ),
    Expanded(
    flex: 2,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Positioned(
    left: width - overlapDistance,
    child: SizedBox(
    width: width,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: height,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    ),
    Expanded(
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Positioned(
    left: (width - overlapDistance) * 2,
    child: SizedBox(
    width: width * 2,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: height,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    ),
    ],
    ),
    const SizedBox(height: 5),
    Stack(
    children: [
    Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper1(thickness: 35),
    Positioned(
    left: (width - overlapDistance) * 4 + overlapDistance,
    child: SizedBox(
    width: width,
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 100,
    width: 100,
    height: height,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    ),
    ),
    ],
    ),
    ),
    const SizedBox(height: 5),
    Stack(
    children: [
    Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper1(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    ),
    ],
    ),
    const SizedBox(height: 5),
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper2(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    clipper: CircleClipper1(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    ),
    ),
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    ],
    ),
    const SizedBox(height: 5),
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper2(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    color: Colors.blue,
    ),
    ),
    ),
    ],
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    clipper: CircleClipper2(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    ),
    ],
    ),
    ],
    ),
    const Positioned(
    right: 0,
    left: 0,
    top: 0,
    bottom: 0,
    child: Icon(
    Icons.check_circle,
    size: 56,
    color: Colors.green,
    ),
    ],
    ),
    const Positioned(
    right: 0,
    left: 0,
    top: 0,
    bottom: 0,
    child: Icon(
    Icons.check_circle,
    size: 56,
    color: Colors.green,
    ),
    ),
    ],
    ),
    ],
    ),
    ],
    ),
    ],
    );
    }),
    ),
    );
    }
  2. Derek Delaney revised this gist Dec 20, 2022. 1 changed file with 223 additions and 55 deletions.
    278 changes: 223 additions & 55 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    import 'dart:math';

    import 'package:flutter/material.dart';

    class FirstClipper extends CustomClipper<Path> {
    @@ -9,14 +11,15 @@ class FirstClipper extends CustomClipper<Path> {

    final width = size.width;
    final height = size.height;
    final halfHeight = height / 2;

    path.moveTo(0, 0);
    path.lineTo(width - 40, 0);
    path.lineTo(width - halfHeight, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 40, height);
    path.lineTo(width - halfHeight, height);
    path.lineTo(0, height);
    path.close();

    return path;
    }

    @@ -35,15 +38,16 @@ class SecondClipper extends CustomClipper<Path> {

    final width = size.width;
    final height = size.height;
    final halfHeight = height / 2;

    path.moveTo(0, 0);
    path.lineTo(width - 40, 0);
    path.lineTo(width - halfHeight, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 40, height);
    path.lineTo(width - halfHeight, height);
    path.lineTo(0, height);
    path.lineTo(40, height / 2);
    path.lineTo(halfHeight, height / 2);
    path.close();

    return path;
    }

    @@ -62,21 +66,22 @@ class ThirdClipper extends CustomClipper<Path> {

    final width = size.width;
    final height = size.height;
    final halfHeight = height / 2;

    path.moveTo(0, 0);
    path.lineTo(width - 40, 0);
    path.lineTo(width - halfHeight, 0);
    path.arcToPoint(
    Offset(width, height / 2),
    radius: Radius.circular(height / 2),
    );
    path.arcToPoint(
    Offset(width - 40, height),
    Offset(width - halfHeight, height),
    radius: Radius.circular(height / 2),
    );
    path.lineTo(0, height);
    path.lineTo(40, height / 2);
    path.lineTo(halfHeight, height / 2);
    path.close();

    return path;
    }

    @@ -86,11 +91,101 @@ class ThirdClipper extends CustomClipper<Path> {
    }
    }

    class CircleClipper1 extends CustomClipper<Path> {
    CircleClipper1({required this.thickness});

    final double thickness;

    @override
    Path getClip(Size size) {
    final height = size.height;
    final width = size.width;
    final innerCircle = width - thickness;

    final path = Path();

    path.moveTo(0, height);
    path.lineTo(thickness, height);
    path.arcToPoint(
    Offset(width, thickness),
    radius: Radius.circular(innerCircle),
    );
    path.lineTo(width, 0);
    path.arcToPoint(
    Offset(0, height),
    radius: Radius.circular(width),
    clockwise: false,
    );
    path.close();

    return path;
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
    }
    }

    class CircleClipper2 extends CustomClipper<Path> {
    CircleClipper2({required this.thickness});

    final double thickness;

    @override
    Path getClip(Size size) {
    final height = size.height;
    final width = size.width;
    final innerCircle = width - thickness;
    const endingDegree = 305.0;

    final path = Path();
    final center = Point<double>(width, 0);

    path.moveTo(0, 0);
    path.lineTo(thickness, 0);
    path.arcToPoint(
    getOffsetOnCircle(center, innerCircle, 295),
    radius: Radius.circular(innerCircle),
    clockwise: false,
    );
    path.arcToPoint(
    getOffsetOnCircle(center, innerCircle + 15, endingDegree),
    radius: const Radius.circular(15),
    );

    path.lineTo(
    getOffsetOnCircle(center, width, endingDegree).dx,
    getOffsetOnCircle(center, width, endingDegree).dy,
    );
    path.arcToPoint(
    const Offset(0, 0),
    radius: Radius.circular(width),
    );
    path.close();

    return path;
    }

    Offset getOffsetOnCircle(Point<double> c, double r, double deg) {
    final x = c.x + r * sin(deg * pi / 180);
    final y = c.y + r * cos(deg * pi / 180);
    return Offset(x, y);
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
    }
    }

    void main() {
    runApp(MyApp());
    runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    @@ -105,63 +200,136 @@ class MyApp extends StatelessWidget {
    }

    class MyHomePage extends StatelessWidget {
    const MyHomePage();
    const MyHomePage({super.key});

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(),
    body: Center(
    child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Expanded(
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 70,
    color: Colors.blue,
    child: const Center(child: Text("Some Text")),
    body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
    children: [
    Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Expanded(
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 70,
    color: Colors.blue,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    Expanded(
    flex: 1,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Expanded(
    flex: 1,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),

    Expanded(
    flex: 2,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Expanded(
    flex: 2,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    Expanded(
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    Expanded(
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 70,
    ],
    ),
    const SizedBox(height: 5),
    Stack(
    children: [
    Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper1(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    clipper: CircleClipper1(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    ),
    ],
    ),
    const SizedBox(height: 5),
    Row(
    mainAxisSize: MainAxisSize.min,
    children: [
    ClipPath(
    clipper: CircleClipper2(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
    ),
    ),
    const SizedBox(width: 5),
    Transform.scale(
    scaleX: -1,
    child: ClipPath(
    clipper: CircleClipper2(thickness: 35),
    child: Container(
    height: 100,
    width: 100,
    color: Colors.green,
    ),
    ),
    ),
    ],
    ),
    ],
    ),
    const Positioned(
    right: 0,
    left: 0,
    top: 0,
    bottom: 0,
    child: Icon(
    Icons.check_circle,
    size: 56,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ],
    ),
    ],
    ),
    ],
    ),
    ),
    );
  3. Derek Delaney revised this gist Dec 19, 2022. 1 changed file with 23 additions and 11 deletions.
    34 changes: 23 additions & 11 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -11,12 +11,12 @@ class FirstClipper extends CustomClipper<Path> {
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width - 30, 0);
    path.lineTo(width - 40, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 30, height);
    path.lineTo(width - 40, height);
    path.lineTo(0, height);

    path.close();

    return path;
    }

    @@ -37,13 +37,13 @@ class SecondClipper extends CustomClipper<Path> {
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width - 30, 0);
    path.lineTo(width - 40, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 30, height);
    path.lineTo(width - 40, height);
    path.lineTo(0, height);
    path.lineTo(30, height / 2);

    path.lineTo(40, height / 2);
    path.close();

    return path;
    }

    @@ -64,19 +64,19 @@ class ThirdClipper extends CustomClipper<Path> {
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width - 30, 0);
    path.lineTo(width - 40, 0);
    path.arcToPoint(
    Offset(width, height / 2),
    radius: Radius.circular(height / 2),
    );
    path.arcToPoint(
    Offset(width - 30, height),
    Offset(width - 40, height),
    radius: Radius.circular(height / 2),
    );
    path.lineTo(0, height);
    path.lineTo(30, height / 2);

    path.lineTo(40, height / 2);
    path.close();

    return path;
    }

    @@ -120,13 +120,25 @@ class MyHomePage extends StatelessWidget {
    Expanded(
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 70,
    color: Colors.blue,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    Expanded(
    flex: 1,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),

    Expanded(
    flex: 2,
    child: ClipPath(
  4. Derek Delaney revised this gist Dec 19, 2022. 1 changed file with 38 additions and 42 deletions.
    80 changes: 38 additions & 42 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -9,11 +9,11 @@ class FirstClipper extends CustomClipper<Path> {

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.lineTo(width, height/2);
    path.lineTo(width -30, height);
    path.lineTo(width - 30, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 30, height);
    path.lineTo(0, height);

    path.close();
    @@ -32,16 +32,16 @@ class SecondClipper extends CustomClipper<Path> {
    @override
    Path getClip(Size size) {
    final path = Path();

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.lineTo(width, height/2);
    path.lineTo(width -30, height);
    path.lineTo(width - 30, 0);
    path.lineTo(width, height / 2);
    path.lineTo(width - 30, height);
    path.lineTo(0, height);
    path.lineTo(30, height/2);
    path.lineTo(30, height / 2);

    path.close();
    return path;
    @@ -59,16 +59,22 @@ class ThirdClipper extends CustomClipper<Path> {
    @override
    Path getClip(Size size) {
    final path = Path();

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.arcToPoint(Offset(width, height/2), radius: const Radius.circular(30));
    path.arcToPoint(Offset(width -30, height), radius: const Radius.circular(30));
    path.lineTo(width - 30, 0);
    path.arcToPoint(
    Offset(width, height / 2),
    radius: Radius.circular(height / 2),
    );
    path.arcToPoint(
    Offset(width - 30, height),
    radius: Radius.circular(height / 2),
    );
    path.lineTo(0, height);
    path.lineTo(30, height/2);
    path.lineTo(30, height / 2);

    path.close();
    return path;
    @@ -80,7 +86,6 @@ class ThirdClipper extends CustomClipper<Path> {
    }
    }


    void main() {
    runApp(MyApp());
    }
    @@ -113,42 +118,33 @@ class MyHomePage extends StatelessWidget {
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Expanded(
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    Expanded(
    flex: 2,
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    Expanded(
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 70,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
  5. Derek Delaney revised this gist Dec 19, 2022. 1 changed file with 44 additions and 37 deletions.
    81 changes: 44 additions & 37 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -65,8 +65,8 @@ class ThirdClipper extends CustomClipper<Path> {

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.arcToPoint(Offset(width, height/2), radius: Radius.circular(30));
    path.arcToPoint(Offset(width -30, height), radius: Radius.circular(30));
    path.arcToPoint(Offset(width, height/2), radius: const Radius.circular(30));
    path.arcToPoint(Offset(width -30, height), radius: const Radius.circular(30));
    path.lineTo(0, height);
    path.lineTo(30, height/2);

    @@ -94,7 +94,7 @@ class MyApp extends StatelessWidget {
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: MyHomePage(),
    home: const MyHomePage(),
    );
    }
    }
    @@ -107,46 +107,53 @@ class MyHomePage extends StatelessWidget {
    return Scaffold(
    appBar: AppBar(),
    body: Center(
    child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    SizedBox(
    height: 50,
    width: 150,
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Expanded(
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    SizedBox(
    height: 50,
    width: 300,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Expanded(
    flex: 2,
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    SizedBox(
    height: 50,
    width: 150,
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    Expanded(
    child: SizedBox(
    height: 50,
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ),
    ),
    ],
    ],
    ),
    ),
    ),
    );
  6. Derek Delaney created this gist Dec 19, 2022.
    154 changes: 154 additions & 0 deletions CustomCliper.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,154 @@
    import 'package:flutter/material.dart';

    class FirstClipper extends CustomClipper<Path> {
    FirstClipper();

    @override
    Path getClip(Size size) {
    final path = Path();

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.lineTo(width, height/2);
    path.lineTo(width -30, height);
    path.lineTo(0, height);

    path.close();
    return path;
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
    }
    }

    class SecondClipper extends CustomClipper<Path> {
    SecondClipper();

    @override
    Path getClip(Size size) {
    final path = Path();

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.lineTo(width, height/2);
    path.lineTo(width -30, height);
    path.lineTo(0, height);
    path.lineTo(30, height/2);

    path.close();
    return path;
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
    }
    }

    class ThirdClipper extends CustomClipper<Path> {
    ThirdClipper();

    @override
    Path getClip(Size size) {
    final path = Path();

    final width = size.width;
    final height = size.height;

    path.moveTo(0, 0);
    path.lineTo(width -30, 0);
    path.arcToPoint(Offset(width, height/2), radius: Radius.circular(30));
    path.arcToPoint(Offset(width -30, height), radius: Radius.circular(30));
    path.lineTo(0, height);
    path.lineTo(30, height/2);

    path.close();
    return path;
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
    }
    }


    void main() {
    runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: MyHomePage(),
    );
    }
    }

    class MyHomePage extends StatelessWidget {
    const MyHomePage();

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(),
    body: Center(
    child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    SizedBox(
    height: 50,
    width: 150,
    child: ClipPath(
    clipper: FirstClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    SizedBox(
    height: 50,
    width: 300,
    child: ClipPath(
    clipper: SecondClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    SizedBox(
    height: 50,
    width: 150,
    child: ClipPath(
    clipper: ThirdClipper(),
    child: Container(
    height: 150,
    color: Colors.green,
    child: const Center(child: Text("Some Text")),
    ),
    ),
    ),
    ],
    ),
    ),
    );
    }
    }