The Align component, as the name implies, is used to control the position of the child component in the parent component, such as in the Container center:

Container(
    width: 200,
    height: 200,
    color: Colors.green,
    child: Align(
        alignment: Alignment.Center,
        child: Container(
            width: 40,
            height: 40,
            color: Colors.pink,
        ),
    ),
)
Copy the code

The effect is as follows:

Center is displayed in the Center of an Alignment(0.00,0.00). In Alignment(int x,int Y), the x and y ranges from -1.0 to 1.0 and ranges from the upper left to the lower right. Out of range of -1.0 or 1.0, indicating that the Parent is out of range, can achieve special effects, such as Alignment(0,-1.5), which have the following floating effects:

ClipRect can cut sub-parts, and Align can achieve the effect of displaying part of the content.

Let’s start with the big picture:

ClipRect(Child: Align(widthFactor: 1.0, heightFactor: 1.0, child: Image.network)"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),),)Copy the code

As shown in figure:

Now let’s change the heightFactor to 0.5 to show only the top half

ClipRect(Child: Align(widthFactor: 1.0, heightFactor: 0.5, child: Image.network)"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),),)Copy the code

To display the lower half of the alignment, change the alignment to align.bottomCenter.

ClipPath uses custom shapes and is more customized than ClipRect. Wrap the widgets you need to customize with ClipPath and then implement your custom CustomClipper. Let’s implement a quadratic Bezier curve shape picture.

ClipPath(
    clipper: CurvedClipper(),
    child: Image.network("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),),Copy the code
class CurvedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    returnPath() .. lineTo(0, size.height) .. quadraticBezierTo( size.width / 4, size.height - 40, size.width / 2, size.height - 20) .. quadraticBezierTo( size.width * 3 / 4, size.height, size.width, size.height - 30) .. lineTo(size.width, 0); } @override bool shouldReclip(CustomClipper<Path> oldClipper) {return true; }}Copy the code

The renderings are as follows:

ClipRect, ClipPath simple use, thank you for watching.