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

Overview

flutter_custom_clippers

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

Pub Package

Usage

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

Contributors

  1. Damodar Lohani
  2. Siddhartha Joshi

Screenshot

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: SideCutClipper(),
            child: Container(
              height: 600,
              width: 500  ,
              color: Colors.pink,
              child: Center(child: Text("SideCutClipper()")),
            ),
          ),
          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()")),
            ),
          ),
            SizedBox(
            height: 10,
          ),
          ClipPath(
            clipper: ArrowClipper(70, 80, Edge.BOTTOM),
            child: Container(
              height: 120,
              color: Colors.green,
              child: Center(child: Text("ArrowClipper()")),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          ClipPath(
            clipper: StarClipper(8),
            child: Container(
              height: 450,
              color: Colors.indigo,
              child: Center(child: Text("Starlipper()")),
            ),
          ),
           ClipPath(
            clipper: MessageClipper(borderRadius: 16),
            child: Container(
              height: 200,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(16.0)),
                color: Colors.red,
              ),
              child: Center(child: Text("MessageClipper()")),
            ),
          ),
        ],
      ),
    );
  }
}

Credits

On latest update few clippers were added from Flutter Clipper Experiments repository.

Comments
  • Request for inverted WaveClipperOne && WaveClipperTwo

    Request for inverted WaveClipperOne && WaveClipperTwo

    Hi,

    Great and beautiful clippers. It would be great if you add inverted option to the class or add WaveClipperOneInverted and WaveClipperTwoInverted in this class.

    Thanks in advance

    opened by Alijaaan 9
  • Circle with wavy border

    Circle with wavy border

    Hello @lohanidamodar ,

    I want to make circle container with wavy border. For that, I used your star_clipper.dart file with some changes. But, I can't make it same as I want. Can you please help?

    Here is my code & output of it

    import 'dart:math' as math;
    
    import 'package:flutter/widgets.dart';
    
    /// Clip widget in star shape
    class StarClipper extends CustomClipper<Path> {
      StarClipper(this.numberOfPoints);
    
      /// The number of points of the star
      final int numberOfPoints;
    
      late int counter = 0;
    
      @override
      Path getClip(Size size) {
        double width = size.width;
    
        double halfWidth = width / 2;
    
        double bigRadius = halfWidth;
    
        double radius = halfWidth / 1.11;
    
        double degreesPerStep = _degToRad(360 / numberOfPoints) as double;
    
        double halfDegreesPerStep = degreesPerStep / 2;
    
        var path = Path();
    
        double max = 2 * math.pi;
    
        path.moveTo(width, halfWidth);
    
        debugPrint('halfWidth: $halfWidth');
        debugPrint('bigRadius: $bigRadius');
        debugPrint('degreesPerStep: $degreesPerStep');
        debugPrint('max: $max');
    
        path.moveTo(
          halfWidth + radius * math.cos(0 + halfDegreesPerStep),
          halfWidth + radius * math.sin(0 + halfDegreesPerStep),
        );
    
        for (double step = 0; step < max + 1; step += degreesPerStep) {
          debugPrint('math.cos(step): ${math.cos(step)}');
          debugPrint('math.sin(step): ${math.sin(step)}');
          debugPrint(
              'math.cos(step + halfDegreesPerStep): ${math.cos(step + halfDegreesPerStep)}');
          debugPrint(
              'math.sin(step + halfDegreesPerStep): ${math.sin(step + halfDegreesPerStep)}');
    
          debugPrint('------step-------: $step');
          debugPrint('x 1: ${halfWidth + bigRadius * math.cos(step)}');
          debugPrint('y 1: ${halfWidth + bigRadius * math.sin(step)}');
          debugPrint(
              'x 2: ${halfWidth + radius * math.cos(step + halfDegreesPerStep)}');
          debugPrint(
              'y 2: ${halfWidth + radius * math.sin(step + halfDegreesPerStep)}');
    
          // path.lineTo(halfWidth + bigRadius * math.cos(step),
          //     halfWidth + bigRadius * math.sin(step));
          
          // path.lineTo(halfWidth + radius * math.cos(step + halfDegreesPerStep),
          //     halfWidth + radius * math.sin(step + halfDegreesPerStep));
    
          /*path.quadraticBezierTo(
            halfWidth + bigRadius * math.cos(step),
            halfWidth + bigRadius * math.sin(step),
            halfWidth + radius * math.cos(step + halfDegreesPerStep),
            halfWidth + radius * math.sin(step + halfDegreesPerStep),
          );*/
    
          if (counter % 2 == 0) {
            path.quadraticBezierTo(
              halfWidth + bigRadius * math.cos(step),
              halfWidth + bigRadius * math.sin(step),
              halfWidth + radius * math.cos(step + halfDegreesPerStep),
              halfWidth + radius * math.sin(step + halfDegreesPerStep),
            );
          } else {
            path.quadraticBezierTo(
              halfWidth + radius * math.cos(step),
              halfWidth + radius * math.sin(step),
              halfWidth + bigRadius * math.cos(step + halfDegreesPerStep),
              halfWidth + bigRadius * math.sin(step + halfDegreesPerStep),
            );
          }
    
          counter++;
        }
        path.close();
        return path;
      }
    
      num _degToRad(num deg) => deg * (math.pi / 180.0);
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        StarClipper oldie = oldClipper as StarClipper;
        return numberOfPoints != oldie.numberOfPoints;
      }
    }
    
    image

    I want like below

    Screenshot 2022-12-16

    opened by shweta-7span 6
  • How to make a curved bottom app bar

    How to make a curved bottom app bar

    Hi!, I'm trying to implement this screenshot with bottom app bar, I didn't manage to make the SideCutClipper to be at the top of the bottom app bar any ideas?

    Image description

    opened by TahaMalas 5
  • err after upd to 1.1.0

    err after upd to 1.1.0

    Hi, after update to last v1.1.0 i've this error: The argument type 'OvalTopBorderClipper' can't be assigned to the parameter type 'CustomClipper'.

    How can i fix it ? Thanks

    opened by blondie63 3
  • notification received when app crashes in flutter

    notification received when app crashes in flutter

    error D/AndroidRuntime(24012): Shutting down VM E/AndroidRuntime(24012): FATAL EXCEPTION: main E/AndroidRuntime(24012): Process: com.rayz.arrow, PID: 24012 E/AndroidRuntime(24012): java.lang.RuntimeException: Unable to instantiate service com.rayz.arrow.Application: java.lang.ClassCastException: com.rayz.arrow.Application cannot be cast to android.app.Service E/AndroidRuntime(24012): at android.app.ActivityThread.handleCreateService(ActivityThread.java:3940) E/AndroidRuntime(24012): at android.app.ActivityThread.access$1500(ActivityThread.java:219) E/AndroidRuntime(24012): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1875) E/AndroidRuntime(24012): at android.os.Handler.dispatchMessage(Handler.java:107) E/AndroidRuntime(24012): at android.os.Looper.loop(Looper.java:214) E/AndroidRuntime(24012): at android.app.ActivityThread.main(ActivityThread.java:7356) E/AndroidRuntime(24012): at java.lang.reflect.Method.invoke(Native Method) E/AndroidRuntime(24012): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492) E/AndroidRuntime(24012): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930) E/AndroidRuntime(24012): Caused by: java.lang.ClassCastException: com.rayz.arrow.Application cannot be cast to android.app.Service E/AndroidRuntime(24012): at android.app.AppComponentFactory.instantiateService(AppComponentFactory.java:129) E/AndroidRuntime(24012): at androidx.core.app.CoreComponentFactory.instantiateService(CoreComponentFactory.java:75) E/AndroidRuntime(24012): at android.app.ActivityThread.handleCreateService(ActivityThread.java:3935) E/AndroidRuntime(24012): ... 8 more I/Process (24012): Sending signal. PID: 24012 SIG: 9

    opened by choudhryr723 2
  • Fix syntax formatting for all the custom clippers

    Fix syntax formatting for all the custom clippers

    Hi @lohanidamodar, awesome library!

    Here's just PR for a very minor syntax formatting issue I encountered after opening your flutter plugin.

    BTW, are you also open to document the math and the logic used for the clippers here? I'm open for collaboration. Send me a message.

    Thank you!

    opened by joshuadeguzman 2
  • Wave's curve is not smooth

    Wave's curve is not smooth

    Please see this comment on a closed issue: https://github.com/lohanidamodar/flutter_custom_clippers/issues/14#issuecomment-619358859

    I am also experiencing this issue when flip=true.

    opened by SlickSlime 0
  • Not Issue : But how to achieve this Clip Look ?

    Not Issue : But how to achieve this Clip Look ?

    Excellent library !!.

    I am tasked to achieve the following look but Unable to write my custom clipping item to do this. Can you please show me how to this clipping ? Currently I am using a row view with your RoundedDiagonalPathClipper() clip.

    This is the required look. https://i.stack.imgur.com/hKfDy.png

    What I am able to do so far ? https://i.stack.imgur.com/GeCid.png

    It would be great if you can show me how to get the curved look as required

    opened by lohith8099 0
  • Why GPL v3 license?

    Why GPL v3 license?

    Thank you for the good package.

    May I know if the GPL v3 license is intentional? GPL V3 prevents this package from being used in closed source applications.

    opened by hariprasadiit 0
Releases(2.1.0)
  • 2.1.0(Dec 23, 2022)

    What's Changed

    • Added Wavy circle clipper by @shwetavish in https://github.com/lohanidamodar/flutter_custom_clippers/pull/27
    • update version and prepare for release by @lohanidamodar in https://github.com/lohanidamodar/flutter_custom_clippers/pull/28
    • remove unused author by @lohanidamodar in https://github.com/lohanidamodar/flutter_custom_clippers/pull/29

    New Contributors

    • @shwetavish made their first contribution in https://github.com/lohanidamodar/flutter_custom_clippers/pull/27
    • @lohanidamodar made their first contribution in https://github.com/lohanidamodar/flutter_custom_clippers/pull/28

    Full Changelog: https://github.com/lohanidamodar/flutter_custom_clippers/commits/2.1.0

    Source code(tar.gz)
    Source code(zip)
Owner
Damodar Lohani
Tech Consultant | Open source enthusiast | ❤ Flutter | Full stack Developer
Damodar Lohani
Superellipse_shape - A package for creating superellipse shapes in flutter

Superellipse Shape A package for creating superellipse shapes in flutter. class SuperellipseDemo extends StatelessWidget { @override Widget build(

Sander R. D. Larsen 36 Dec 4, 2022
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices. Usage It is VERY easy

xamantra 19 Nov 25, 2022
Aris imageexmii - Learn everything about images such as adding filters, borders & different shapes

Flutter Tutorial - 2/2 Image - Deep Dive Learn everything about images such as a

Behruz Hurramov 0 Dec 29, 2021
Morphing Coffee 0 Jan 27, 2022
Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

唯鹿 165 Jan 2, 2023
Dart Koans. Achieve enlightenment through failure.

Dart Koans This application is inspired by Ruby Koans. The idea is simple: You achieve enlightenment though a process of failures. As each failure is

Matthew Butler 41 Oct 3, 2022
SmallTask - Take small steps to achieve big things

SmallTask - Take small steps to achieve big things. Have you ever felt that when you are working on a project you kinda get confused about what to do?

Yuji 2 Mar 7, 2022
An app to save money and achieve your goal! Available on iOS & Android 🚀

BudgetMe An app that helps you save money and achieve your goal! Screenshots TestFlight & Google Play Beta License About This is an app to save money

Carlton Aikins 31 Nov 27, 2022
Achieve ~60 FPS, no matter how heavy the tree is to build/layout

flutter_smooth Achieve ~60 FPS, no matter how heavy the tree is to build/layout. ?? 3-second video output_small.mp4 (left = without smooth, right = sm

fzyzcjy 1k Jan 9, 2023
A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Abdelrahman Saed 1 Jun 18, 2020
A carousel package in flutter with various configuration options

Flutter_Carosel A simple Carousel Widget with multiple configuration option. ... dependencies: ... flutter_multi_carousel: ^1.0.0 ... And install it

GeekyAnts 67 Oct 2, 2022
A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator. See below for more examples.

null 50 Jan 6, 2022
A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
"FlutterMoneyFormatter" is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

FlutterMoneyFormatter FlutterMoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like

Fadhly Permata 81 Jan 1, 2023
A flutter Package provides you a modern animated fancy segment

animated_segment This package will animates a segment. Package provides you a mo

MindInventory 24 Dec 10, 2022
A flutter package that provides all icons you need

Before starting ✋ . I want to tell you that every star ?? added to my space shines my world and motivate me ?? to make more awesome things like this o

Andrew Nasef 47 Dec 29, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 537 Jan 8, 2023
A flutter package which will help you to create a draggable widget that can be dragged around the screen.

A flutter package which will help you to create a draggable widget that can be dragged around the screen. Demo Features ?? Manually Control the positi

Adar 31 Aug 10, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022