Make Custom Clipper for your Application | Flutter Tutorials
Flutter comes with a different widget like ClipRect, ClipRRect, and ClipOval which are useful to create custom shapes but we can only create few shapes using that, while we can create any type of shapes using the ClipPath.
I will talk about creating a custom path using CustomClipper and use it in ClipPath.
..................................................................................................................................................................................................................
Example :#1 [ Custom Clipper ]
ClipPath
ClipPath is used to create a very custom widget of any shape. ClipPath has a clipper property that requires a custom clipper.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: Center(
child: ClipPath(
clipper: MyCustomClipper(),
child: Container(
width: 200,
height: 200,
color: Colors.pink,
),
),
),
);
}
...................................
To create a custom clipper, you need to create a class that extends CustomClipper<Path>
and must override two methods.
class MyCustomClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false
}
...................................
Code Here
import 'package:flutter/material.dart';
import 'package:sapan/pages/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homes(),
);
}
}
class Homes extends StatefulWidget {
@override
_HomesState createState() => _HomesState();
}
class _HomesState extends State<Homes> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipPath(
clipper: MyCliper(),
child: Image.asset("assets/images/original.jpeg",
fit: BoxFit.cover),
)
],
),
));
}
}
class MyCliper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
Basic Info
Happy Coding :)
..................................................................................................................................................................................................................
Example :#2
import 'package:flutter/material.dart';
import 'package:sapan/pages/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homes(),
);
}
}
class Homes extends StatefulWidget {
@override
_HomesState createState() => _HomesState();
}
class _HomesState extends State<Homes> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipPath(
clipper: MyCliper(),
child: Image.asset("assets/images/original.jpeg",
fit: BoxFit.cover),
)
],
),
));
}
}
class MyCliper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path()
..lineTo(0.0, size.height)
..lineTo(size.width, size.height)
..close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
@override
Path getClip(Size size) {
Path path = Path()
..lineTo(0, size.height) // Add line p1p2
..lineTo(size.width, size.height) // Add line p2p3
..close();
return path;
}
..................................................................................................................................................................................................................
Example :#3
Happy Coding :)
..................................................................................................................................................................................................................
Example :#4
import 'package:flutter/material.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
void main() async {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.green));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(
title: 'Home',
),
);
}
}
class Home extends StatefulWidget {
Home({Key key, this.title}) : super(key: key);
final String title;
@override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
padding: EdgeInsets.all(20.0),
children: [
ClipPath(
clipper: WaveClipperOne(reverse: false),
child: Container(
height: 100,
color: Colors.cyan,
child: Text('Text 1'),
),
),
ClipPath(
clipper: WaveClipperTwo(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: OvalBottomBorderClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: OvalRightBorderClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: ArcClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: WaveClipperTwo(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: MovieTicketClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: MovieTicketBothSidesClipper(),
child: Container(
height: 100,
color: Colors.green,
child: Text('Text 2'),
),
),
ClipPath(
clipper: MultiplePointedEdgeClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
ClipPath(
clipper: OvalTopBorderClipper(),
child: Container(
height: 100,
color: Colors.deepOrange,
child: Text('Text 2'),
),
),
],
));
}
}
Happy Coding:)
..................................................................................................................................................................................................................
Example :#3
No comments:
Post a Comment