ClipRRect & ClipPath In Flutter
In this blog, I will talk about creating a ClipRRect and Custom path using CustomClipper and use it in ClipPath in flutter application. In this app, we can circular the shape of any image using ClipRRect while we can create any type of shape using ClipPath. It will not contain any kind of package in it. We will implement a demo of the ClipRRect and ClipPath in a flutter in your flutter applications. Now let’s start.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
ClipRRect:
The ClipRRect widget is used to clip your child using a round import. It connects with the clippers family. The main function of the clippers is to print any part of the widget as per it’s a requirement. It is similar to ClipRect. It is used to clip the import part of the child widget. ClipRect has its own side per its requirement. We can do circulars. But Clippath is the one used to clip widgets in a customized fashion. We can do widgets as per our requirement. It has two Properties Clippers and ClipBehavior. Clippers what happens takes a custom clipper that defines how the text will be clipped and the clippings are clipped according to this option in the clip behaviour property.
Demo Module :
Code Implement :
1.ClipRRect:
This is a widget used to clip a round import. You can specify the radius of the corner in the borderRadius property of this widget. while you can not resize it in an image with rounded corners without this widget container widget decoration properties.
Create a new dart file calledcliprrect_demo inside the lib folder.
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(_img),
)
2.ClipPath:
We use ClipPath to customize the size of any image or container. The clippath has a clipper property that requires a custom clipper.
Create a new dart file calledclippath_demo inside the lib folder.
Container(
margin: EdgeInsets.only(left: 15, right: 15),
alignment: Alignment.center,
child: ClipPath(
clipper: ClipPathClass(),
child: SizedBox(
width: 320,
height: 240,
child: Image.asset(
_imageUrl,
fit: BoxFit.cover,
),
),
),
),
Creating a custom clipper requires creating a class. Which extends the CustomClipper<Path> and should override the two methods.
class ClipPathClass extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height - 30);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
var secondPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
When the custom clip needs to be updated, it is called the getClip method. and this method has a parameter that gives the value of width and height.
The shouldReclip method is called when providing a new instance of the class. If the new example has different information than the old one, it should be returned true or it is false.
As you can see above, the x- increases horizontally, and Y-axis increases downward.
lineTo:
Using this method one can cut the widget with a line from the given point . x and y are two destinations points where the line stops.
quadraticBeizerTo:
with the help of quadraticBeizer method, you can clip your widget with curves.we can draw a quadratic bezier curve using the control point and endpoint.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_cliprrect_clipath_demo/route_names.dart';
class ClipRRectDemo extends StatefulWidget {
@override
_ClipRRectDemoState createState() => _ClipRRectDemoState();
}
class _ClipRRectDemoState extends State<ClipRRectDemo> {
double _height;
double _width;
String _img = 'assets/images/just_in2.jpg';
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[300],
title: Text('ClipRRect'),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Center(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(_img),
)),
MaterialButton(
onPressed: () {
Navigator.of(context).pushNamed(RouteName.CliPathScreen);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5.0))),
height: _height / 18,
minWidth: _width,
elevation: 0,
color: Colors.blue[300],
padding: EdgeInsets.all(16.0),
child: Text('Next',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
fontFamily: 'Roboto Medium',
color: Colors.white,
)),
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_cliprrect_clipath_demo/clipath_class.dart';
class ClipPathDemo extends StatefulWidget {
@override
_ClipPathDemoState createState() => _ClipPathDemoState();
}
class _ClipPathDemoState extends State<ClipPathDemo> {
double _height;
double _width;
String _imageUrl = 'assets/images/just_in2.jpg';
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[300],
title: Text('ClipPath'),
centerTitle: true,
),
body: Container(
margin: EdgeInsets.only(left: 15, right: 15),
alignment: Alignment.center,
child: ClipPath(
clipper: ClipPathClass(),
child: SizedBox(
width: 320,
height: 240,
child: Image.asset(
_imageUrl,
fit: BoxFit.cover,
),
),
),
),
);
}
}
Conclusion :
In this article, I have explained a ClipRRect and Clippath demo, you can modify and experiment according to your own, this little introduction was from the ClipRRect and Clippath from our side.
I hope this blog helps will provide you with sufficient information in Trying up the ClipRRect and Clippath in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
