Image is a common control. It can help us display pictures. The resources of pictures can come from the network, local or memory. In the development of mobile terminal, image will be widely used to display some graphics and text. It is very necessary to understand and master image control.
Assetimage and image asset
AssetImageIt is a class provided by fluent that can read picture resources locally. We can use it to read pictures. Similarly, flutter also provides
Image.assetThis constructor directly helps us read the image resource and return an image object. actually
AssetImageA higher level of encapsulation.
Note: to read local images, we first need to
pubspec.yamlThe path to configure local image resources in the file. We’re here
assetsNew in this field
- images/image_demo.jpgThis file. There will be a special blog to explain resource management.
Image( image: AssetImage("images/image_demo.jpg"), width: 80, height: 80, )
Image.asset( "images/image_demo.jpg", width: 80, height: 80, )
Both methods pass in a local file path.
Networkimage and image network
NetworkImageIs a class that can download pictures from the network. It is asynchronous in itself.
NetworkImageIt needs to pass in a URL address to return an image object. The design of these two is similar to
Image.assetThe design is basically the same.
Image( image: NetworkImage("http://www.fulade.me/img/avatar.jpg"), width: 80, height: 80, )
Image.network( "http://www.fulade.me/img/avatar.jpg", width: 80, height: 80, )
alignmentIs a very important parameter of image, which can help us set the position of the image. There are several enumerated values
|topRight||Upper right corner|
|bottomLeft||In the lower right corner|
|bottomRight||In the lower right corner|
fitParameter is a very important layout parameter. When our picture content does not completely match the size set by image,
fitParameter value of
BoxFitIt can help us make the best adjustment and display
fitThe default value for is
BoxFit.contain。 It is not difficult to see from the figure below,
BoxFit.containIt will be scaled equally, maintaining the original scale of the picture and displayed in the image.
As can be seen from the figure
BoxFit.fillIt will fill the whole container. If the picture size does not exactly match the container, stretching may occur.
BoxFit.coverThe size of the image resource will be maintained. If it exceeds the size, it will be cut off and will not be displayed.
BoxFit.fitWidthThe width will fill the whole container, the height will be scaled, the picture will not be stretched, and the part beyond the container will be clipped.
BoxFit.fitWidthSimilarly, the height will fill the entire container, the width will be scaled, the picture will not be stretched, and the part beyond the container will be clipped.
None indicates that the display policy is not set and is displayed in the center of the original size.
When the picture resource is larger than the container, the effect is equivalent to
When the component is smaller than the picture, the effect is equivalent to
For loaded pictures, fluent will help us do memory caching. The maximum number of caches is 1000 and the maximum cache memory space is 100m.
To experience the running effect of the above example, you can go toMy GitHub warehouseproject
image_page.dartView it, and you can download it, run it and experience it.