The fundamental constraints of Flutter

“This is the 22nd day of my participation in the August Gwen Challenge, for more details: August Gwen Challenge” juejin.cn/post/698796…

In the learning process, in order to adjust or adapt the size of the Widget, some constraint widgets will be set or nested. Let’s learn about this set of constraints Box.

SizedBox

Source code analysis

Class SizedBox extends SingleChildRenderObjectWidget {/ / create a fixed size constraints Box const SizedBox ({Key Key, enclosing the width, this.height, Widget child }) : super(key: key, child: child); Box const SizedBox. Expand ({Key Key, Widget child}) : width = double.infinity, height = double.infinity, super(key: key, child: child); Box const sizedbox. shrink({Key Key, Widget child}) : width = 0.0, height = 0.0, super(Key: key, child: child); // create constraint Box sizedbox. fromSize({Key Key, Widget child, Size Size}) : width = size?.width, height = size?.height, super(key: key, child: child); }Copy the code

Analysis of the source code, the SizeBox inherited from SingleChildRenderObjectWidget stored only provide Child Child does not provide update logic; And SizedBox provides a variety of ways to use, small dishes try one by one;

Case try

1. SizedBox({ Key key, this.width, this.height, Widget child })

SizedBox can customize width and height. When the width and height are limited, the child widgets are filled by default regardless of width and height. Double. Infinity fills in the width and height of the parent Widget. Note that the parent Widget has a limit, not an infinite width and height. Display by child Widget size when width and height are not set;

Return SizedBox(width: 100.0, height: 100.0, child: Container(color: color.teal. WithOpacity (0.4))); Return SizedBox(width: 100.0, height: 100.0, child: Container(color: color.red. WithOpacity (0.4), width: 200.0, height: 200.0)); Return SizedBox(width: 100.0, height: 100.0, child: Container(color: color.pink. WithOpacity (0.4), width: 50.0, height: 50.0)); Return SizedBox (width: double infinity, height: 100.0, child: Container (color: Colors. BlueAccent. WithOpacity (0.4)));Copy the code

2. SizedBox.expand({ Key key, Widget child })

. Expand is a convenience method, default width and height are double. Infinity, fill the entire parent Widget;

Child: return SizedBox. Expand (Container (color: Colors. BlueAccent. WithOpacity (0.4)));Copy the code

3. SizedBox.shrink({ Key key, Widget child })

.shrink is also a convenient method, but both width and height are 0.0, and no matter how many child widgets are set, it is not displayed. Xiao CAI has not come up with the application scenario of this method.

Child: return SizedBox. The shrink (Container (color: Colors. Pink. WithOpacity (0.4)));Copy the code

4. SizedBox.fromSize({ Key key, Widget child, Size size })

The fromSize method is basically the same as the basic construction method, except that width and height are encapsulated by Size. This method is used to achieve the same effect as the basic method.

Return SizedBox. FromSize (size: size (100.0, 100.0), child: Container(color: color.teal. WithOpacity (0.4))); Return SizedBox. FromSize (size: size (100.0, 100.0), child: Container(color: color.red. WithOpacity (0.4), width: 200.0, height: 200.0)); Return SizedBox. FromSize (size: size (100.0, 100.0), child: Container(color: color.pink. WithOpacity (0.4), width: 50.0, height: 50.0)); FromSize (size: size (double. Infinity, 100.0)), child: Container(color: Colors. BlueAccent. WithOpacity (0.4)));Copy the code

ConstrainedBox

Source code analysis

class ConstrainedBox extends SingleChildRenderObjectWidget { ConstrainedBox({ Key key, @required this.constraints, Widget child, })} Class BoxConstraints extends Constraints {// Create frame Constraints with the specified size const BoxConstraints({this.minWidth = 0.0, This.maxwidth = double. Infinity, this.minheight = 0.0, this.maxheight = double. Infinity,}); // Create frame Size only with the specified Size BoxConstraints. Tight (Size Size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height; Const boxcontrains.tightfor ({double width, double height,}) // Create a box constraint that requires a given width or height. Unless they are infinite const BoxConstraints. TightForFinite ({double width = double infinity, double height = double. Infinity, }) // Create constraint boxContrains.loose (Size Size) : MinWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height; // Create a box constraint that extends to fill another box constraint const BoxConstraints. Expand ({double width, double height,})}Copy the code

Analysis of the source code, the ConstrainedBox is inherited from the same SingleChildRenderObjectWidget; Constraints operate primarily on constraints; More flexible than SizedBox constraints;

Case try

1. BoxConstraints()

The BoxConstraints constructor allows you to set the maximum, minimum width and height properties, which can be used flexibly in real scenarios. MinWidth <= child.width <= maxWidth && minHeight <= child.height <= maxHeight MinWidth = 0.0&& minHeight = 0.0&& maxWidth = double. Infinity && maxHeight = double. Infinity;

Return ConstrainedBox(constraints: BoxConstraints(), child: Container(color: color.pink. WithOpacity (0.4), child: _textWid('ConstrainedBox'))); Return ConstrainedBox (constraints: BoxConstraints (), the child: Container (color: Colors. BlueAccent. WithOpacity (0.4), the child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox(constraints: BoxConstraints(minWidth: 100.0, minHeight: 100.0), child: Container(color: Colors. Orange. WithOpacity (0.4), the child: _textWid (' ConstrainedBox))); Return ConstrainedBox(constraints: BoxConstraints(maxHeight: 100.0, maxWidth: 100.0), child: Container(color: Colors. The teal. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

2. BoxConstraints.tight(Size size)

MinWidth == maxWidth == size.width && maxWidth == maxHeight == size.height; Regardless of the width and height of the child widgets, the width and height are constrained by Size.

Return ConstrainedBox(constraints: BoxConstraints. Tight (Size(110.0, 120.0)), child: Container(color: Colors. The purple. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

3. BoxConstraints.tightFor()

TightFor is a refinement of the. Tight method. You can customize width and height. If the width is not set, the maximum width is infinite and the minimum width is 0.0. If the width and height are set, the size is set to constrain;

Return ConstrainedBox(constraints: BoxConstraints. TightFor (height: 110.0), child: Container(color: Colors. The teal. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox(constraints: BoxConstraints. TightFor (width: 110.0, height: 120.0), child: Container(color: Colors. The purple. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

4. BoxConstraints.tightForFinite()

TightForFinite is similar to tightFor, with the default maximum width and height set to infinity and the default minimum width and height set to 0.0. MinWidth == maxWidth == width && maxWidth == maxHeight == height;

return ConstrainedBox(constraints: BoxConstraints.tightForFinite(), child: Container(color: Colors. The teal. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox (constraints: BoxConstraints tightForFinite (width: 110.0, height: 120.0), the child: Container (color: Colors. The purple. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

5. BoxConstraints.loose()

Loose mode limits given Size, minWidth/minHeight to 0.0, maximum width/height to Size; The overall constraint is limited by Size, and the actual display is related to the Size of the child widgets.

Return ConstrainedBox(constraints: BoxConstraints. Loose (Size(110.0, 150.0)), child: Container(color: Colors. The purple. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox(constraints: BoxConstraints. Loose (Size(110.0, 150.0)), child: Container(width: 200.0, height: Opacity(0.6), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox(constraints: BoxConstraints. Loose (Size(110.0, 120.0)), child: Container(width: 100.0, height: Color: color.green. WithOpacity (0.6), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

6. BoxConstraints.expand()

Most. Expand mode is the fill mode. By default, the parent Widget is filled. MinWidth == maxWidth == double. Infinity minHeight == maxHeight == double. Infinity minHeight == maxHeight == double.

return ConstrainedBox(constraints: BoxConstraints.expand(), child: Container(color: Colors. The teal. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.'))); Return ConstrainedBox(constraints: BoxConstraints. Expand (width: 110.0, height: 150.0), child: Container(color: Colors. The purple. WithOpacity (0.4), the child: _textWid (' ConstrainedBox: A widget that imposes additional constraints on its child.')));Copy the code

---

Flutter provides multiple constraint boxes. As a saying goes, all roads lead to Rome. One effect can be realized in many ways. Xiao CAI’s research on Box series is still very superficial, please give more guidance if there are mistakes!

Source: Little Monk A Ce