[flutter 2-6] UI layout of flutter handle tutorial – image control, networkimage, assetimage

Time:2022-1-15

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 providesImage.assetThis constructor directly helps us read the image resource and return an image object. actuallyImage.assetYesAssetImageA higher level of encapsulation.

Note: to read local images, we first need topubspec.yamlThe path to configure local image resources in the file. We’re hereassetsNew in this field- images/image_demo.jpgThis file. There will be a special blog to explain resource management.

1. AssetImage

Image(
    image: AssetImage("images/image_demo.jpg"),
    width: 80,
    height: 80,
)

2. Image.asset

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.Image.networkYesNetworkImageIt needs to pass in a URL address to return an image object. The design of these two is similar toAssetImageandImage.assetThe design is basically the same.
3. NetworkImage

Image(
    image: NetworkImage("http://www.fulade.me/img/avatar.jpg"),
    width: 80,
    height: 80,
)

4. Image.network

Image.network(
    "http://www.fulade.me/img/avatar.jpg",
    width: 80,
    height: 80,
)

Alignment

alignmentIs a very important parameter of image, which can help us set the position of the image. There are several enumerated values

parameter describe
topCenter Center up
topRight Upper right corner
centerLeft Center left
center Center
centerRight Center right
bottomLeft In the lower right corner
bottomCenter Center bottom
bottomRight In the lower right corner

BoxFit

fitParameter is a very important layout parameter. When our picture content does not completely match the size set by image,fitParameter value ofBoxFitIt can help us make the best adjustment and display
5. BoxFit.contain
fitThe default value for isBoxFit.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.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

6. BoxFit.fill
As can be seen from the figureBoxFit.fillIt will fill the whole container. If the picture size does not exactly match the container, stretching may occur.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

7. BoxFit.cover
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.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

8. BoxFit.fitWidth
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.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

9. BoxFit.fitHeight
BoxFit.fitHeightFollowBoxFit.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.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

10. BoxFit.none
None indicates that the display policy is not set and is displayed in the center of the original size.
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

11. BoxFit.scaleDown
When the picture resource is larger than the container, the effect is equivalent toBoxFit.none
When the component is smaller than the picture, the effect is equivalent toBoxFit.contain
[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage

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 warehouseprojectflutter_app->lib->routes->image_page.dartView it, and you can download it, run it and experience it.


[flutter 2-6] UI layout of flutter handle tutorial - image control, networkimage, assetimage