Flutter custom clippers to help you achieve various custom shapes

flutter custom clippers

flutter package that provides you custom clippers to help you achieve various custom shapes.

usage for custom clippers

to use this plugin, add flutter_custom_clippers as a dependency in your pubspec.yaml file.

example

import 'package:flutter/material.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      home: homescreen(),
    );
  }
}

class homescreen extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text("flutter custom clipper example"),
      ),
      body: listview(
        padding: edgeinsets.all(20.0),
        children: <widget>[
          clippath(
            clipper: multipleroundedcurveclipper(),
            child: container(
              height: 100,
              color: colors.pink,
              child: center(child: text("multipleroundedcurveclipper()")),
            ),
          ),
          sizedbox(height: 20.0,),
          clippath(
            clipper: multiplepointededgeclipper(),
            child: container(
              height: 100,
              color: colors.green,
              child: center(child: text("multiplepointededgeclipper()")),
            ),
          ),
          sizedbox(height: 20.0,),
          clippath(
            clipper: octagonalclipper(),
            child: container(
              height: 220,
              color: colors.red,
              child: center(child: text("octagonalclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: hexagonalclipper(),
            child: container(
              height: 220,
              color: colors.blueaccent,
              child: center(child: text("hexagonalclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: hexagonalclipper(reverse: true),
            child: container(
              height: 220,
              color: colors.orangeaccent,
              child: center(child: text("hexagonalclipper(reverse: true)")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: parallelogramclipper(),
            child: container(
              height: 220,
              color: colors.pinkaccent,
              child: center(child: text("parallelogramclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: diagonalpathclipperone(),
            child: container(
              height: 120,
              color: colors.red,
              child: center(child: text("diagonalpathclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: diagonalpathclippertwo(),
            child: container(
              height: 120,
              color: colors.pink,
              child: center(child: text("diagonalpathclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: waveclipperone(),
            child: container(
              height: 120,
              color: colors.deeppurple,
              child: center(child: text("waveclipperone()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: waveclipperone(reverse: true),
            child: container(
              height: 120,
              color: colors.deeppurple,
              child: center(child: text("waveclipperone(reverse: true)")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: waveclippertwo(),
            child: container(
              height: 120,
              color: colors.orange,
              child: center(child: text("waveclippertwo()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: waveclippertwo(reverse: true),
            child: container(
              height: 120,
              color: colors.orange,
              child: center(child: text("waveclippertwo(reverse: true)")),
            ),
          ),
          sizedbox(height: 10.0,),
          clippath(
            clipper: roundeddiagonalpathclipper(),
            child: container(
              height: 320,
              decoration: boxdecoration(
                borderradius: borderradius.all(radius.circular(50.0)),
                color: colors.orange,
              ),
              child: center(child: text("roundeddiagonalpathclipper()")),
            ),
          ),
          sizedbox(height: 10.0,),
          clipoval(
            clipper: ovaltopborderclipper(),
            child: container(
              height: 120,
              color: colors.yellow,
              child: center(child: text("ovaltopborderclipper()")),
            ),
          ),
        ],
      ),
    );
  }
}