Flutter can load and display images via the Image component. The Image data source can be asset, memory, file, or network. You can also use Icon font ICONS to display different images

Image

Can be used to load a variety of photos. Here’s how to load images from asset and network, followed by the associated properties

The source code example

Constructors are as follows:

const Image({
	Key key,
	@required this.image,
	this.semanticLabel,
	this.excludeFromSemantics = false,
	this.width,
	this.height,
	this.color,
	this.colorBlendMode,
	this.fit,
	this.alignment = Alignment.center,
	this.repeat = ImageRepeat.noRepeat,
	this.centerSlice,
	this.matchTextDirection = false,
	this.gaplessPlayback = false,
	this.filterQuality = FilterQuality.low,
})
Copy the code

There is a mandatory image parameter, which corresponds to an ImageProvider

ImageProvider is an abstract class that mainly defines the interface load() for image data acquisition. Different imageProviders are implemented to obtain images from different data sources.

For example AssetImage is an ImageProvider that implements loading images from an Asset, while NetworkImage implements an ImageProvider that loads images from the network.

Load the image from asset

  1. Create an images folder under the project directory (it must be the project directory) and copy the image logo.jpg into the folder.

  2. Add the following to the flutter section of pubspec.yaml:

assets:
   - images/logo.jpg
Copy the code

Note: due to theyamlThe document is very strict on indentation, so you must indent each layer with two Spaces. There should be two Spaces before assets.

  1. Load the image
Image(
  image: AssetImage("images/logo.jpg"), // Fill in the path defined by assets above);Copy the code

Image also provides a quick constructor for loading and displaying images from an asset: image. asset

Image.asset(
	"images/logo.jpg".)Copy the code

Load images from the network

No configuration is required

Image: NetworkImage('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1785737583, & FM = 26 & gp = 0. 1674337830 JPG'),),Copy the code

Image also provides a quick constructor, Image.network, for loading and displaying images from the network:

Image.network(
  "Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1785737583, & FM = 26 & gp = 0. 1674337830 JPG".)Copy the code

Attribute interpretation

Just a few of the main properties of the Image

const Image({ ... This.width, // the width of the picture this.height, // the height of the picture this.color, // the blending value of the picture this.colorblendMode, // Align this. Repeat = ImageRepeat. NoRepeat,// Align this. })Copy the code

Width, height,

Set the width and height of the image. If the width and height are not specified, the original size of the image will be displayed as much as possible according to the limits of the current parent container. If only one of width and height is set, the other property will be scaled by default, but the fit rule can be specified through the fit property.

Fit (key)

This property is used to specify the image’s fit mode when the image’s display space and image size are different. The fit mode is defined in BoxFit, for example: fit: boxfit.contain

BoxFit has the following values:

  • Fill: it will stretch to fill the display space, the aspect ratio of the picture itself will change, and the picture will be deformed.
  • Cover: the image will be enlarged according to the aspect ratio of the image and then centered to fill the display space. The image will not be deformed, and the part beyond the display space will be clipped.
  • Contain: This is the default image adaptation rule, the image will ensure that the image itself length to width ratio unchanged under the condition of scaling to adapt to the current display space, the image will not be distorted.
  • FitWidth: The width of the image will be scaled to the width of the display space, the height will be scaled to scale, and then the image will be centered. The image will not be distorted, and the parts that exceed the display space will be clipped.
  • FitHeight: The height of the image will be scaled to the height of the display space, the width will be scaled to scale, and then the center display, the image will not be distorted, the part of the display space will be cropped.
  • None: The image has no adaptive policy and will be displayed in the display space. If the image is larger than the display space, only the middle part of the image will be displayed in the display space.

You can try to write a try, here is not texture, because the feeling is not intuitive, so I have to personally write to see the effect

Color, colorBlendMode

During image drawing, you can mix colors for each pixel, color specifies the blend color, and colorBlendMode specifies the blend mode.

Code examples:

Image(
  image: AssetImage("images/logo.jpg"), width: 100.0, color: color.blue, colorBlendMode: blendmode.difference,);Copy the code

repeat

Specifies a repetition rule for an image when the image itself is smaller than the display space.

That is, the screen is large and the image is small. Use this property to set whether the photo is tiled, equivalent to repeat in H5

Code examples:

Image(
  image: AssetImage("images/logo.jpg"), width: 100.0, height: 200.0, repeat: imagerepeat.repeaty, // Set the photo on the Y axis tile)Copy the code

Other values:

  • repeat: ImageRepeat.repeatX// Set the photo to tile on the X axis
  • repeat: ImageRepeat.noRepeat// Set photos not tiled
  • repeat: ImageRepeat.repeat// Set the photo tile on the X and Y axes

The Image cache

The Flutter framework has a cache (memory) for loaded images. By default, the maximum cache size is 1000 and the maximum cache space is 100M.

Set the circle image

Let’s take this one out for a moment. There’s a component that can set a circular image directly, and that’s the ClipOval

Such as:

ClipOval(
 child: Image.network(
   "Https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3289458325, & FM = 26 & gp = 0. 1767138375 JPG",
    width: 100,
 ),
)
Copy the code

The effect is simply a circular image, and you can also customize the Settings using decoration

For details about the use of decorations, go to the Container control section of Flutter >Container

Icon

Flutter can also use iconfont, a font icon, just like Web development. This is to make ICONS into font files and display different images by specifying different characters. Similar to the reference font icon in Element-UI

Iconfont has the following advantages over images in Flutter development:

  • Small size: You can reduce the installation package size.
  • Vector: Iconfont is a vector icon. Zooming in does not affect its clarity.
  • Text styles can be applied: you can change the color, size alignment, and so on of font ICONS just like text.
  • You can mix TextSpan with text.

Material Design Font icon

Flutter default contains a set of Material Design font ICONS, which are configured for Flutter in the pubspec.yaml file as follows:

flutter:
  uses-material-design: true
Copy the code

Material Design all ICONS to view:Material. IO/resources/I…

Use: Flutter encapsulates IconData and Icon to display font Icons. The Icons class contains the IconData static variable definitions for all Material Design Icons.

So to use them, we just use Icons. And then we add the Icons names

Code examples:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green,),
    Icon(Icons.error,color: Colors.green,),
    Icon(Icons.fingerprint,color: Colors.green,),
  ],
)
Copy the code

Custom font ICONS

We can also use custom font ICONS. Iconfont. Cn (a vector icon library of Alibaba) has a lot of font icon materials, we can choose their own ICONS package download

After download, font files are generated in different formats. In Flutter, we use the TTF format.

Suppose we need to use a wechat icon in our project,

  1. We go to the website, find the designated icon and pack it up for download.

  2. Under the project, create a new folder fonts to store our fonts and icon files (the two can be put together), and save the icon files we downloaded into the fonts folder

  3. This is then introduced into FLUTTER under pubspec.yaml

flutter:
  fonts:
    - family: myIcon  # specify a font name
      fonts:
        - asset: fonts/iconfont.ttf
Copy the code

Be sure to pay attention to the space, don’t write too much, don’t write too little

  1. For ease of use, let’s define oneMyIconsClasses, functions andIconsClass to define all ICONS in a font file as static variables:
Class ICONS {// wechat static const IconData = const IconData(0xec7d, fontFamily:'myIcon', 
      matchTextDirection: true
  );
}
Copy the code
  1. indartUse in files
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.wechat,color: Colors.green,),
  ],
)
Copy the code
  1. Run, perfect

H_H