During the learning process, Xiao CAI found that the style of the Widget inside the Container cannot be changed only by setting decoration. We usually cut the Widget through ClipX. When it comes to clipping widgets, ClipOval/ClipRRect/ClipPath are usually used for basic styles. CustomClipper can also be used for slightly complex styles.

And the side dish today tries another similar onePhysicalModelWay;PhysicalXThe mode can be setWidgetShadow effect, whileClipXThe way is not good;

PhysicalModel

Source code analysis

Const PhysicalModel({Key Key, this.shape = BoxShape. Rectangle, // clipBehavior = Clip.None, BorderRadius, // This. Elevation = 0.0, // Shadow height @required this.color, This. shadowColor = const Color(0xFF000000), // shadowColor Widget child,})Copy the code

PhysicalModel is a trim Widget with a relatively simple style, where the color background is essential and the shadowColor is the real influence.

Case try

1. shape & borderRadius

Rectangle and BoxShape.circle correspond to ClipRRect and ClipOval, respectively. BorderRadius only applies to rectangle with rounded corners. ClipBehavior is consistent with other cutting methods.

// ClipX return ClipRRect(borderRadius: borderradius.all (radius.circular (20.0)), child: Container(width: 80.0, height: Child: 80.0, Image. The asset (' images/icon_hzw01. JPG))); Return Container(width: 80.0, height: 80.0, child: ClipOval(child: image. asset('images/icon_hzw01.jpg', fit: BoxFit.fill))); // PhysicalModel return PhysicalModel( color: Colors.transparent, shape: isCircle ? BoxShape.circle : BoxShape.rectangle, clipBehavior: Clip.antiAlias, borderRadius: Borderradius.all (radius.circular (20.0)), Child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg')));Copy the code

2. color & shadowColor

Color corresponds to the background color of the cropped Widget. The shadow effect is displayed according to the current background color. ShadowColor can be set to the shadowColor.

Return PhysicalModel(color: color.teal. WithOpacity (0.6), shape: isCircle? Rectangle: Rectangle. Rectangle, clipBehavior: Clip. AntiAlias, elevation: 6.0, Rectangle: Rectangle? Colors. Yellow: Colors. DeepOrange, borderRadius: Borderradius. all(radius.circular (20.0)), Child: Container(width: 80.0, height: 80.0, color: color.pink. WithOpacity (0.2));Copy the code

PhysicalShape

Source code analysis

Const PhysicalShape({Key Key, @required this.clipper, this.clipBehavior = Clip.none, this.elevation = 0.0, @required this.color, this.shadowColor = const Color(0xFF000000), Widget child, })Copy the code

PhysicalShape is similar to ClipPath, which uses clipper to customize the cutting mode.

Case try

Side dish try to cut a polygon picture, customize CustomClipper to set the cutting style;

Return ClipPath(clipBehavior: clip. antiAlias, Clipper: PolygonClipper(10), child: Container(width: 80.0, height: Child: 80.0, Image. The asset (' images/icon_hzw01. JPG))); return PhysicalShape( color: Colors.transparent, clipBehavior: Clip.antiAlias, clipper: PolygonClipper(10), color: Colors. DeepOrange, elevation: 6.0, Child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg'))); class PolygonClipper extends CustomClipper<Path> { final int num; PolygonClipper(this.num); @override Path getClip(Size Size) {double radius = size.width * 0.5; Path _path = Path(); Var startX = size.width * 0.5 + radius * cos(2 * PI * 0 / num); Var startY = size.height * 0.5 + radius * sin(2 * PI * 0 / num); _path.moveTo(startX, startY); for (var i = 1; i <= num; I ++) {var newX = size.width * 0.5 + radius * cos(2 * PI * I/num); Var newY = size.height * 0.5 + radius * sin(2 * PI * I/num); _path.lineTo(newX, newY); } _path.close(); return _path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => true; }Copy the code

PhysicalModel & PhysicalShape case source code

The tip doesn’t go far enough for deeper clipping methods. Flutter also provides the corresponding AnimatedPhysicalModel with animated effects. If there are mistakes, please give more guidance!

Source: Little Monk A Ce