This is the fourth day of my participation in Gwen Challenge
preface
My name is Zero. Today we are going to talk about the use of several clipping components of Flutter, which are often used in the project. I hope you can learn something from them.
Results show
In real projects we often see the following clipping shapes. Flutter provides a handy Widget that can be easily implemented. Let’s take a look at the following
Clipping the Widget
ClipRRect (Rounded rectangle clipping)
The borderRadius property makes it easy to set the radius of the corners
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
img1,
height: height,
),
),
Copy the code
Other attributes
At a glance, you can see that there are only 5 ClipRRect attributes. Here, we may need to adjust 1~3
borderRadius
radiusclipper
Custom rounded rectangle clippingclipBehavior
Cut wayClip.none
Don’t cutClip.hardEdge
No anti-aliasing clippingClip.antiAlias
The default– Anti-aliased cuttingClip.antiAliasWithSaveLayer
Anti-aliasing and compositing clipping (this mode not only has anti-aliasing, but also allocates an off-screen cache, and subsequent clipping takes place in the buffer)
Cutting of other shapes
Here we set up a borderRadius with four corners to achieve different shapes. Let’s take a look
- Leaf shape
ClipRRect(
borderRadius: BorderRadius.only(
// Set the lower left radius to 40
bottomLeft: Radius.circular(40),
// Set the radius in the upper right corner to 40
topRight: Radius.circular(40),
),
child: ...,
),
Copy the code
- “Dog house” shape
ClipRRect(
borderRadius: BorderRadius.vertical(
// Set the top radius to 40
top: Radius.circular(40),
// Set the lower radius to 10
bottom: Radius.circular(10),
),
child: ...,
),
Copy the code
More creative effects waiting for you to play
ClipOval (Elliptical clipping)
If your child component is a rectangle, it will crop out as an oval
ClipOval(
child: Image.network(
img1,
// Only the height is set. The original image is a rectangle
height: height,
),
),
Copy the code
If your subcomponent is a square, it will crop out as a circle
// The width and height of the definition are equal
var width = 100.0;
var height = 100.0;
ClipOval(
child: Image.network(
img1,
width: width,
height: height,
/ / zoom
fit: BoxFit.cover,
),
),
Copy the code
Other attributes
There is only a clipper, a clipBehavior, which means the same thing as the ClipRRect property
ClipRect (Rectangular clipping)
This is rarely used, temporarily did not find the application scenario, but more than the description, you can find the comment to tell me oh, I will update in time
ClipPath (Path clipping)
This gives you more freedom to play, such as ⭐️ five-pointed star, ❤️ heart, coupon card and 👆 ️ above all shapes can be used to achieve path clipping, we will achieve a bottom curve clipping effect
ClipPath(
// We need to pass a CustomClipper
to clipper
clipper: ClipperPath(),
child: Image.network(
img1,
height: height,
),
),
Copy the code
Create a curve clipper path. See the code below to see how the clipper can be used for clipping widgets
The following code comments are very detailed, look carefully oh
/// Creating clipping paths
class ClipperPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
// Connect to 3/4 away from the upper left corner
path.lineTo(0.0, size.height / 2);
// The first control point
var firstControlPoint = Offset(0, size.height);
// The target point is the bottom intermediate point
var firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
// The second control point
var secondControlPoint = Offset(size.width, size.height);
// The target point is 3/4 of the way up
var secondPoint = Offset(size.width, size.height / 2);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
// Connect to the upper right corner
path.lineTo(size.width, 0.0);
/ / closed
path.close();
// Return to the clipping path
return path;
}
@override
boolshouldReclip(CustomClipper<Path> oldClipper) => oldClipper.hashCode ! =this.hashCode;
}
Copy the code
Tips: Tailoring paths is expensive, and for some shapes, it is recommended to use the optimized widgets above
A optimization
You’re smart enough to realize that we can do this with ClipRRect, so why write so much code? Here we go. Look at it. Code
ClipRRect(
borderRadius: BorderRadius.vertical(
// Set the bottom fillet radius to 60
bottom: Radius.circular(60),
),
child: Image.network(
img1,
height: height,
),
),
Copy the code
Source warehouse
Based on the latest version of Flutter 🔥
- Flutter Widgets warehouse
Refer to the link
- ClipRRect (Flutter Widget of the Week)
- Flutter-ClipRRect
- Flutter-ClipRect
- Flutter-ClipOval
- Flutter-ClipPath
- Flutter-CustomClipper
Pay attention to column
- This article has been included in the column at 👇 below, you can follow it directly
- Read more | The series continues to be updated
👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible