children
.assets,images,image
folders as a path assets/images/image.
pubspec.yaml
file in our project. Like this. - assets/images/image/pic01.png
, but if you want to configure the all file in a folder, you should configure it like I do. image
in the images
. Otherwise it will be invalid.pic02.png
. In order to show our picture smaller, I have some handles.Image({...})
,Image.network(src,{...})
,Image.file(file,{...})
,Image.memory(bytes, {...})
their main different is from their source, but most parameters are same. Because of our article focus on widget, I will tell you for the next topic.double
, the example is below.Container
to contain it. You have noticed that the name of _PIC01
, I define them upon the class just in the same file, it doesn't mater if you don't do as this, but this is very convenience to use._limitSize()
in our children
property. In the follow parameter I will tell you, I don't tell you as the detail of the using function as this example, I just tell the main function we use, the other description will ignore.Image
. When we look at the definition, it extends the BoxFit
. BoxFit
is a enum
in the flutter. So we use it just as type.fill
means that the picture will stretch the width and the height to 100, then the ratio of the picture will may be changed.It often looked as abnormal.Container
.fitWidth
, if we set this, the picture will set the width equal to 100, and then stretch the height with the same stretch ratio. The size of the pic01.png
is 720*1202. if we stretch the width equal 100, then the ratio s = 100/720
, so the height of the picture should be h=1202*s=1202*100/720 =167
, but our height of our Container is 100, don't completely show the picture, so the Image
will don't the other part of the picture. But which part? This depends on the parameter of the alignment, but default we show the picture in the center, then it will cut up and down symmetry part.fitHeight
is the same as the fitWidth
, but this time we need to stretch with height first, then stretch with the same ratio for the width, then cut the horizontal direction if it is larger than the parent widget. Finally, we will get the result as we want. See code below, we just add code in function _fitContain
. fitWidth
and fitHeight
now. Then we can look at the contain
, What can we get it. Just watch our example carefully, you can see the different between the fitWidth
Image and the fitHeight
Image. The fore one full cover the container,but not show the entire picture to you. the latter one not cover the whole Container
, but show the entire picture. So it depends on the result of the stretch size. If the result is larger than parent widget,Then it will show like the first-one, otherwise it will show you like the second-one. So I will tell you what contain
may do.fitWidth
parameter, we get the result-one. fitHeight
parameter, we get the result-two.fitHeight
one.contain
really do. We can have a short note about the contain
, contain = entire-picture(fitWidth,fitHeight)
, hope you like this, we just change to contain
to see the result.cover
with the fitWidth
and the fitHeight
. You can understand the cover
parameter as follow step. fitWidth
parameter, we get the result-one. fitHeight
parameter, we get the result-two.fitWidth
one.contain
in fore two steps, but in the last step, contain
select the one who show the entire picture, while cover
select the one who cover the whole parent widget. It is a bit different, but sometime they same when the Image
show the entire picture and also cover the whole parent widget. fitWidth
one.scaleDown
. This is the same as the contain
, but when there is enough place to show, we do nothing about this, just show it.none
is also easy to understand, it do not stretch the size of picture, when there is not enough place to show, it will hide other part and only show the part fit the parent widget, the hide part also depends on the parameter of alignment
, default it align center. Let's just look at the code.Container
, we can use the same way as before, more detail is in the link below.children
we use them.color
is the color we want to blend and the colorBlendMode
is the way of blend. Let's look at the effect.enum
in the flutter. So you use it as a type, I just use the ImageRepeat.repeatX
as a example. This will repeat picture in the horizontal direction, but you should know, there must be enough place to repeat.TextDirection
, if you want your picture draw the same way, then you can use this parameter. But you should care about that its parent widget is the Directionality
, the code is below.none,low,medium,high
,the default FilterQuality.low
. Let's see the using.FilterQuality.none
value.width&height,fit,color&colorBlendMode,repeat,matchTextDirection,filterQuality
Image
, so you must know how to use them.