Review of past topics:

We have learned the Widget used for text display in Flutter. For example, we will use Text Widget to display a line or a piece of basic text. If we need to set style, color and other attributes with Text, we can customize it by specifying style for TextThe styles in TextStyle show the effects we need. For text input controls, we learned about TextField and learned that simple text input requirements can be completed through TextField. InputDecoration can be used to add styles to the input box, such as comfortable auxiliary prompts, borders, and both sides.icon and so on.

Today, let's learn about another Widget---Image. As the name suggests, Image is a control used to display pictures. Like Text, it belongs to StatelessWidget. I will explain StatelessWidget and StatefullWidget in detail in a later article.Readers can ignore this knowledge point for the time being. When doing native Android development, we can specify different image sources for ImageView, which can be source networks, drawables, bitmaps, files, etc. Flutter also supports loading images from different sources., but the images that Flutter loads with different resources are slightly different from native Android. Let's enter the topic of this issue together.

How Flutter loads different resource images:

• new Image, to get the image from ImageProvider.
• new Image.asset, to get the image from the AssetBundle.
• new Image.network, for getting an image from a URL.
• new Image.file, to get an image from a file.
• new Image.memory, to get the image from memory

Image in flutter supports JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP image formats.

1. Load image from network:

In order to develop good code reading habits, let's first look at the construction method of Image.network

Image.network(String src, {Key key,double scale: 1.0,//reduction factorthis.width,//widththis.height,//highthis.color,this.colorBlendMode,this.fit, //fill methodthis.alignment: Alignment.center,this.repeat: ImageRepeat.noRepeat, //Image arrangementthis.centerSlice,this.matchTextDirection: false,this.gaplessPlayback: false,Map headers,})

Through the construction method, we can initially clearly understand that to load network images in Flutter, we only need to specify the src of the image in Image.network, which is the url of the target image. If you need to configure the image width, height, and zoomIt is better to write than the corresponding construction method. The following example code shows loading the image from the target url, and setting the width and height of the image to 500*500;

Rendering:

Sample code:

import 'package:flutter/material.dart';void main() {runApp(new MaterialApp(home: new ImageDemo()));}class ImageDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new TextField(decoration: new InputDecoration(),),),body: new Image.network("https://p1.ssl.qhmsg.com/dr/220__/t01d5ccfbf9d4500c75.jpg",width:500,height: 500,));}}

2. Load images from the project's local directory:

To load images in the project directory in Flutter, we need to declare and import resources from pubspec.yaml before we can use the image resources in the dart file. Otherwise, even if the image exists in the project directory, after you specify the path in the dart fileIt also cannot be loaded normally. Readers should pay attention to this point, which is a bit different from writing native Android.

For example, I imported the two pictures aaa.png and a.png in the images folder into the project through pubspec.yaml:

Replace the body part of the above code with Image.asset method.

body: new Image.asset('images/aaa.png',width: 500,height: 500,)

The construction method of Image.asset is similar to that of network, so I won't post it. Readers can check the source code by themselves. Let's take a look at the pictures we loaded from the project directory to end our study on Image in this issue.

Rendering:

Next: Flutter Getting Started and Advanced Tour (6) Layout Widget