Flutter series: detailed explanation of container layout commonly used in flutter

brief introduction

In the last article , We listed flutter All in layout class , It also introduces in detail two very common layout:Row and Column.

Master the above two basic layout It's not enough , If you need to deal with daily layout Use , We still need to master more layout Components . Today we will introduce a powerful layout:Container layout.

Container Use

Container Is a blank container , Usually it can be used Container To encapsulate other widget. So why do we need to widget Packaged in Container What about China? ？ This is because Container Some special functions are included in the .

such as Container You can set the background color or background picture , And you can set padding, margins and borders. This provides a lot of space for component customization .

Let's look at it first Container Definition and constructor of ：

class Container extends StatelessWidget {
 Container({
 Key? key,
 this.alignment,
 this.padding,
 this.color,
 this.decoration,
 this.foregroundDecoration,
 double? width,
 double? height,
 BoxConstraints? constraints,
 this.margin,
 this.transform,
 this.transformAlignment,
 this.child,
 this.clipBehavior = Clip.none,
 })


You can see Container It's a StatelessWidget, Its constructor can pass in several very useful properties , Used to control Container The performance of the .

Container There is padding,decoration,constraints and margin These are some properties related to location , What do they have to do with it ？

container First of all, will child use padding Wrap it up ,padding It can be used decoration Fill in .

After filling padding Can also be applied constraints To limit ( such as width and height), Then this component can use margin Wrap the blank .

Next, let's look at a simple Container Contained in the Column and Row Example .

First construct a container widget, It contains a Column：

 Widget build(BuildContext context) {
 return Container(
 decoration: const BoxDecoration(
 color: Colors.white,
 ),
 child: Column(
 children: [
 buildBoxRow(),
 buildBoxRow(),
 ],
 ),
 );
 }


Here to Container Set up a BoxDecoration, Is used to specify the Container Background color .

stay Child Given in Column widget, its child It's a Row object .

 Widget buildBoxRow() => Row(
 textDirection: TextDirection.ltr,
 children: [
 Container(
 width: 100,
 child: Image.asset("images/head.jpg")
 )
 ],
 );


there Row There is another one that contains Image Of Container object .

Last run , We can get the following interface ：

Container Contains two lines , Each line contains a Image object .

rotate Container

By default Container It is a normal layout widget, But sometimes we may need to achieve some special effects , For example, the rotation of components ,Container Provided transform Attributes can easily do this .

about Container Come on ,transform It was first applied in component drawing ,transform After that, we'll have decoration The draw , Then proceed child The draw , The last part foregroundDecoration The draw .

Or the example above , Let's try that transform How attributes work , We are including image Of container Add transform attribute ：

 Widget buildBoxRow() => Row(
 textDirection: TextDirection.ltr,
 children: [
 Container(
 transform: Matrix4.rotationZ(0.2),
 width: 100,
 child: Image.asset("images/head.jpg")
 )
 ],
 );


Last generated APP as follows ：

You can see that the picture has been along Z The shaft rotates .

The rotation here uses Matrix4.rotationZ, That is, along Z Axis selection , Of course you can use rotationX perhaps rotationY, Separate along X Axis or Y Shaft rotation .

If you choose rotationX, So the image should look like this ：

in fact ,Matrix4 It is not only possible to rotate along a single axis , You can also select a specific vector direction for selection .

For example, the following two methods ：

 /// Translation matrix.
 factory Matrix4.translation(Vector3 translation) => Matrix4.zero()
 ..setIdentity()
 ..setTranslation(translation);

 /// Translation matrix.
 factory Matrix4.translationValues(double x, double y, double z) =>
 Matrix4.zero()
 ..setIdentity()
 ..setTranslationRaw(x, y, z);


Matrix4 You can also enlarge abbreviations in three directions , As follows ：

 /// Scale matrix.
 factory Matrix4.diagonal3Values(double x, double y, double z) =>
 Matrix4.zero()
 .._m4storage[15] = 1.0
 .._m4storage[10] = z
 .._m4storage[5] = y
 .._m4storage[0] = x;


Interested friends can try by themselves .

Container Medium BoxConstraints

stay Container Set in Constraints When , We use BoxConstraints.BoxConstraints There are four attributes that contain numbers , Namely minWidth,maxWidth,minHeight and maxHeight.

therefore BoxConstraints Constructor that provides these four values ：

 const BoxConstraints({
 this.minWidth = 0.0,
 this.maxWidth = double.infinity,
 this.minHeight = 0.0,
 this.maxHeight = double.infinity,
 }) : assert(minWidth != null),
 assert(maxWidth != null),
 assert(minHeight != null),
 assert(maxHeight != null);


BoxConstraints The other two constructors are loose and tight：

BoxConstraints.loose(Size size) 
BoxConstraints.tight(Size size) 


What's the difference between the two ？ If one axis The minimum value of is 0 Words , So this BoxConstraints Namely loose.

If one axis When the maximum and minimum values of are equal , So this BoxConstraints Namely tight.

BoxConstraints There is also a very common method in ：

 BoxConstraints.expand({double? width, double? height}) 


expand The maximum value and the minimum value are both infinity Of , The specific definition can be seen from the implementation of the method ：

 const BoxConstraints.expand({
 double? width,
 double? height,
 }) : minWidth = width ?? double.infinity,
 maxWidth = width ?? double.infinity,
 minHeight = height ?? double.infinity,
 maxHeight = height ?? double.infinity;


summary

Container It's a very common layout Components , You can use it skillfully .

Examples of this article ：

https://github.com/ddean2009/learn-flutter.git

Please refer to  

http://www.flydean.com/08-flutter-ui-layout-container/

The most popular interpretation , The deepest dry goods , The most concise tutorial , There are so many tricks you don't know about waiting for you to discover ！

Welcome to my official account. :「 Program those things 」, Know technology , Know you better ！