Curve Clipper

Use curve_clipper package

• In applications that have innovation in design
• Use in modern designs
• Cutting widgets for the beauty and uniqueness of the design

🎛 📱

Install Package

Add the following line to your pubspec.yaml under dependencies:

dependencies:
  curve_clipper: ^0.1.0

Then run:

flutter pub get

Usage

Import it

import 'package:curve_clipper/curve_clipper.dart';

---

CustomClipperWidget(
  mode: ClipperMode.wavy,
  heightFromOrigin: 160,
  child: Container(
    width: double.infinity,
    height: 200,
    decoration: const BoxDecoration(
      color: Colors.cyan,
    ),
  ),
),

---

CustomClipperWidget(
  mode: ClipperMode.wavySin,
  heightFromOrigin: 100,
  child: Container(
    width: double.infinity,
    height: 200,
    decoration: const BoxDecoration(
      color: Colors.cyan,
    ),
  ),
),

---

CustomClipperWidget(
  mode: ClipperMode.wavyCurtain,
  heightFromOrigin: 180,
  curvePoint: 80,
  child: Container(
    width: double.infinity,
    height: 200,
    decoration: const BoxDecoration(
      color: Colors.cyan,
    ),
  ),
),

• curvePoint is the point in the center that has the lowest height
• Its value must be greater than zero and less than heightFromOrigin

---

CustomClipperWidget(
  mode: ClipperMode.convex,
  heightFromOrigin: 120,
  child: Container(
    width: double.infinity,
    height: 200,
    decoration: const  BoxDecoration(
      color: Colors.cyan,
    ),
  ),
),

---

CustomClipperWidget(
   mode: ClipperMode.concave,
   heightFromOrigin: 180,
   curvePoint: 10,
   child: Container(
     width: double.infinity,
     height: 200,
     decoration: const  BoxDecoration(
        color: Colors.cyan,
     ),
   ),
),

• curvePoint is the point in the center that has the lowest height
• Its value must be greater than zero and less than heightFromOrigin

---

by Shervin Hassanzadeh

Contact me at