Skip to content

Commit 2a44939

Browse files
lohanidamodarlohanidamodar
authored
Merge pull request #27 from shwetavish/wavy_circle_clipper
2 parents 92b8147 + 4dac941 commit 2a44939

File tree

9 files changed

+118
-24
lines changed

9 files changed

+118
-24
lines changed

‎README.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ To use this plugin, add `flutter_custom_clippers` as a [dependency in your pubsp
2222
<img src="https://github.com/lohanidamodar/flutter_custom_clippers/raw/master/screenshots/screenshot4.png" height="480px">
2323
<img src="https://github.com/lohanidamodar/flutter_custom_clippers/raw/master/screenshots/screenshot5.png" height="480px">
2424
<img src="screenshots/side.png" height="480px">
25-
25+
<img src="https://github.com/shwetavish/flutter_custom_clippers/blob/wavy_circle_clipper/screenshots/screenshot10.png" height="480px">
2626

2727

2828

@@ -224,6 +224,16 @@ class HomeScreen extends StatelessWidget {
224224
child: Center(child: Text("MessageClipper()")),
225225
),
226226
),
227+
SizedBox(height: 20),
228+
ClipPath(
229+
clipper: WavyCircleClipper(32),
230+
child: Container(
231+
width: 400,
232+
height: 400,
233+
color: Colors.purple,
234+
child: const Center(child: Text("WavyCircleClipper()")),
235+
),
236+
),
227237
],
228238
),
229239
);

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
2626
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
2727

2828
android {
29-
compileSdkVersion 28
29+
compileSdkVersion flutter.compileSdkVersion
3030

3131
sourceSets {
3232
main.java.srcDirs += 'src/main/kotlin'

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
additional functionality it is fine to subclass or reimplement
77
FlutterApplication and put your custom class here. -->
88
<application
9-
android:name="io.flutter.app.FlutterApplication"
9+
android:name="${applicationName}"
1010
android:label="example"
1111
android:icon="@mipmap/ic_launcher">
1212
<activity

‎example/android/build.gradle‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
buildscript {
2-
ext.kotlin_version = '1.3.50'
2+
ext.kotlin_version = '1.6.10'
33
repositories {
44
google()
55
jcenter()
66
}
77

88
dependencies {
9-
classpath 'com.android.tools.build:gradle:3.5.0'
9+
classpath 'com.android.tools.build:gradle:7.1.2'
1010
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
1111
}
1212
}

‎example/android/gradle/wrapper/gradle-wrapper.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
33
distributionPath=wrapper/dists
44
zipStoreBase=GRADLE_USER_HOME
55
zipStorePath=wrapper/dists
6-
distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
6+
distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip

‎example/lib/main.dart‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ class HomeScreen extends StatelessWidget {
2323
padding: EdgeInsets.all(20.0),
2424
children: <Widget>[
2525
ClipPath(
26-
clipper: WaveClipperOne(flip: true,reverse: true),
26+
clipper: WaveClipperOne(flip: true, reverse: true),
2727
child: Container(
2828
height: 120,
2929
color: Colors.orange,
30-
child: Center(child: Text("WaveClipperTwo(flip: true,reverse: true)")),
30+
child: Center(
31+
child: Text("WaveClipperTwo(flip: true,reverse: true)")),
3132
),
3233
),
3334
SizedBox(height: 10.0),
@@ -41,11 +42,12 @@ class HomeScreen extends StatelessWidget {
4142
),
4243
SizedBox(height: 10.0),
4344
ClipPath(
44-
clipper: WaveClipperTwo(flip: true,reverse: true),
45+
clipper: WaveClipperTwo(flip: true, reverse: true),
4546
child: Container(
4647
height: 120,
4748
color: Colors.orange,
48-
child: Center(child: Text("WaveClipperTwo(flip: true,reverse:true)")),
49+
child: Center(
50+
child: Text("WaveClipperTwo(flip: true,reverse:true)")),
4951
),
5052
),
5153
SizedBox(height: 10.0),
@@ -323,6 +325,16 @@ class HomeScreen extends StatelessWidget {
323325
child: Center(child: Text("MessageClipper()")),
324326
),
325327
),
328+
SizedBox(height: 20),
329+
ClipPath(
330+
clipper: WavyCircleClipper(32),
331+
child: Container(
332+
width: 400,
333+
height: 400,
334+
color: Colors.purple,
335+
child: const Center(child: Text("WavyCircleClipper()")),
336+
),
337+
),
326338
],
327339
),
328340
);

‎lib/flutter_custom_clippers.dart‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1+
export 'src/arc_clipper.dart';
2+
export 'src/arrow_clipper.dart';
13
export 'src/diagonal_path_clipper_1.dart';
24
export 'src/diagonal_path_clipper_2.dart';
35
export 'src/hexagonal_clipper.dart';
6+
export 'src/message_clipper.dart';
7+
export 'src/movie_ticket_both_side_clipper.dart';
8+
export 'src/movie_ticket_clipper.dart';
9+
export 'src/multiple_pointed_edge.dart';
10+
export 'src/multiple_rounded_curve.dart';
411
export 'src/octagonal_clipper.dart';
12+
export 'src/oval_bottom_clipper.dart';
13+
export 'src/oval_left_clipper.dart';
14+
export 'src/oval_right_clipper.dart';
515
export 'src/oval_top_border_clipper.dart';
616
export 'src/parallelogram_clipper.dart';
17+
export 'src/points_clipper.dart';
718
export 'src/rounded_diagonal_path_clipper.dart';
19+
export 'src/side_cut_clipper.dart';
20+
export 'src/star_clipper.dart';
21+
export 'src/triangle_clipper.dart';
822
export 'src/wave_clipper_1.dart';
923
export 'src/wave_clipper_2.dart';
10-
export 'src/multiple_pointed_edge.dart';
11-
export 'src/multiple_rounded_curve.dart';
12-
export 'src/arc_clipper.dart';
13-
export 'src/movie_ticket_both_side_clipper.dart';
14-
export 'src/movie_ticket_clipper.dart';
15-
export 'src/points_clipper.dart';
16-
export 'src/triangle_clipper.dart';
17-
export 'src/arrow_clipper.dart';
18-
export 'src/star_clipper.dart';
19-
export 'src/message_clipper.dart';
20-
export 'src/oval_left_clipper.dart';
21-
export 'src/oval_right_clipper.dart';
22-
export 'src/oval_bottom_clipper.dart';
23-
export 'src/side_cut_clipper.dart';
24+
export 'src/wavy_circle_clipper.dart';

‎lib/src/wavy_circle_clipper.dart‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import 'dart:math' as math;
2+
3+
import 'package:flutter/widgets.dart';
4+
5+
/// Clip widget in star shape
6+
class WavyCircleClipper extends CustomClipper<Path> {
7+
WavyCircleClipper(this.numberOfPoints);
8+
9+
/// The number of points of the star
10+
final int numberOfPoints;
11+
12+
late int counter = 0;
13+
14+
@override
15+
Path getClip(Size size) {
16+
double width = size.width;
17+
18+
double halfWidth = width / 2;
19+
20+
double radius = halfWidth / 1.11;
21+
22+
double outerCurveRadius = width / 2.08;
23+
24+
double innerCurveRadius = width / 2.42;
25+
26+
double degreesPerStep = _degToRad(360 / numberOfPoints) as double;
27+
28+
double halfDegreesPerStep = degreesPerStep / 2;
29+
30+
var path = Path();
31+
32+
double max = 2 * math.pi;
33+
34+
path.moveTo(width, halfWidth);
35+
36+
path.moveTo(
37+
halfWidth + radius * math.cos(0 + halfDegreesPerStep),
38+
halfWidth + radius * math.sin(0 + halfDegreesPerStep),
39+
);
40+
41+
for (double step = 0; step < max + 1; step += degreesPerStep) {
42+
if (counter % 2 == 0) {
43+
path.quadraticBezierTo(
44+
halfWidth + outerCurveRadius * math.cos(step),
45+
halfWidth + outerCurveRadius * math.sin(step),
46+
halfWidth + radius * math.cos(step + halfDegreesPerStep),
47+
halfWidth + radius * math.sin(step + halfDegreesPerStep),
48+
);
49+
} else {
50+
path.quadraticBezierTo(
51+
halfWidth + innerCurveRadius * math.cos(step),
52+
halfWidth + innerCurveRadius * math.sin(step),
53+
halfWidth + radius * math.cos(step + halfDegreesPerStep),
54+
halfWidth + radius * math.sin(step + halfDegreesPerStep),
55+
);
56+
}
57+
58+
counter++;
59+
}
60+
path.close();
61+
return path;
62+
}
63+
64+
num _degToRad(num deg) => deg * (math.pi / 180.0);
65+
66+
@override
67+
bool shouldReclip(CustomClipper<Path> oldClipper) {
68+
WavyCircleClipper oldie = oldClipper as WavyCircleClipper;
69+
return numberOfPoints != oldie.numberOfPoints;
70+
}
71+
}

‎screenshots/screenshot10.png‎

95.7 KB
Loading

0 commit comments

Comments
 (0)