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

  • borderRadiusradius
  • clipperCustom rounded rectangle clipping
  • clipBehaviorCut way
    • Clip.noneDon’t cut
    • Clip.hardEdgeNo anti-aliasing clipping
    • Clip.antiAlias The default– Anti-aliased cutting
    • Clip.antiAliasWithSaveLayerAnti-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