Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lohanidamodar/flutter_custom_clippers
Flutter package that provides you custom clippers to help you achieve various custom shapes.
https://github.com/lohanidamodar/flutter_custom_clippers
flutter flutter-clippers flutter-package
Last synced: 5 days ago
JSON representation
Flutter package that provides you custom clippers to help you achieve various custom shapes.
- Host: GitHub
- URL: https://github.com/lohanidamodar/flutter_custom_clippers
- Owner: lohanidamodar
- License: gpl-3.0
- Created: 2018-12-27T10:04:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-23T05:15:55.000Z (about 2 years ago)
- Last Synced: 2025-01-11T00:07:32.601Z (12 days ago)
- Topics: flutter, flutter-clippers, flutter-package
- Language: Dart
- Homepage: https://pub.dartlang.org/packages/flutter_custom_clippers
- Size: 1.4 MB
- Stars: 323
- Watchers: 8
- Forks: 67
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_custom_clippers
Flutter package that provides you custom clippers to help you achieve various custom shapes.
[](https://pub.dartlang.org/packages/flutter_custom_clippers)
## Usage
To use this plugin, add `flutter_custom_clippers` as a [dependency in your pubspec.yaml file](https://flutter.io/docs/development/packages-and-plugins/using-packages).
## Contributors
1. [Damodar Lohani](https://github.com/lohanidamodar)
2. [Siddhartha Joshi](https://github.com/cimplesid)
## Screenshot
## Example
```dart
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: [
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 ](https://github.com/spagni/flutter_clipper_experiments) repository.