lohanidamodar / flutter_custom_clippers Goto Github PK

View Code? Open in Web Editor NEW

321.0 8.0 67.0 1.44 MB

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

Home Page: https://pub.dartlang.org/packages/flutter_custom_clippers

License: GNU General Public License v3.0

Objective-C 0.08% Dart 98.02% Kotlin 0.99% Swift 0.91%

flutter flutter-package flutter-clippers

flutter_custom_clippers's Introduction

flutter_custom_clippers

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

Usage

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

Contributors

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()")),
            ),
          ),
           SizedBox(height: 20),
          ClipPath(
            clipper: WavyCircleClipper(32),
            child: Container(
              width: 400,
              height: 400,
              color: Colors.purple,
              child: const Center(child: Text("WavyCircleClipper()")),
            ),
          ),
        ],
      ),
    );
  }
}

Credits

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

flutter_custom_clippers's People

Contributors

Stargazers

Watchers

flutter_custom_clippers's Issues

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.

The Octagonal Clipper is actually a hexagonal Clipper

The Octagon has 8 sides, The Octagonal Clipper is currently returning an Hexagon of 6 sides

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

License?

Thanks for creating and sharing this package. What license are you making it available under?

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

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

design instagram message shape

how can we design this shape in flutter?

thanks

Null safety support

I will make a PR with null safety support implementation

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?

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

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;
  }
}

lohanidamodar / flutter_custom_clippers Goto Github PK

flutter_custom_clippers's Introduction

flutter_custom_clippers

Usage

Contributors

Screenshot

Example

Credits

flutter_custom_clippers's People

Contributors

Stargazers

Watchers

Forkers

flutter_custom_clippers's Issues

Here is my code & output of it

I want like below

Recommend Projects

Recommend Topics

Recommend Org