Flutter picture of the basic components and Icon

1. Pictures

Flutter, we can load and display images through the Image component, Image data source can be a asset, files, memory, and network.
Look at the Image constructor:

  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,
  })

Attributes	Value Type	Explanation
image	ImageProvider	Required parameter, receiving a value of type ImageProvider
semanticLabel	String	Describe the picture
excludeFromSemantics	bool	Whether to exclude the picture from the semantics, the default value is false
width	double	Width of the image
height	double	Height of the image
color	Color	Pictures foreground color, generally do not set or set a transparent color will overwrite the images, usually used in combination and colorBlendMode
colorBlendMode	BlendMode	And mixed mode generally used in conjunction with color, the color setting
fit	BoxFit	Set the picture display mode
alignment	AlignmentGeometry	Alignment settings for the picture, the default value: Alignment.center
repeat	ImageRepeat	Repeat the way of the picture, is used when the picture is not completely overwrite the container. Default value: ImageRepeat.noRepeat

ImageProvider
ImageProvider is an abstract class that defines the interface main image data acquired load(), acquires image data from different sources need to implement different ImageProvider, as AssetImageis realized from the Assetloading of the pictures ImageProvider, and NetworkImageto achieve a loading of pictures from the network ImageProvider.

Image
Image the widget image has a mandatory parameter, which corresponds to a ImageProvider. Below we show you how to load pictures from the asset and networks.

Load picture from asset (local) in
extension method provides:

Image.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    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,
    String package,
    this.filterQuality = FilterQuality.low,
  })

Create an images directory in the project root directory, and copy the pictures to the directory.
Add the following section in pubspec.yaml flutter in:
Note : Due to file yaml indent strict, it must be in strict accordance with the way each layer is indented two spaces in front of where assets should be two spaces.
Load the picture

          Image(
            image: AssetImage('images/head.jpg'),
            height: 100.0,
            width: 100.0,
          )

Image also provides a quick constructor Image.asset for loading from the asset, the display image:

            Image.asset('images/head.jpg',

            width: 200.0,)

From the Network Load picture
extension method provides:

 Image.network(String src, {
    Key key,
    double scale = 1.0,
    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,
    Map<String, String> headers,
  })

Code:

Image(
  image: NetworkImage(
      "https://image.so.com/view?q=%E5%A4%B4%E5%83%8F&listsrc=sobox&listsign=5e2b6249a421975bae5d94f4a460b9e4&src=relation_qqimage&correct=%E5%A4%B4%E5%83%8F&ancestor=list&cmsid=8672a2655380efa68ffa17c13c3f2c40&cmras=1&cn=0&gn=0&kn=50&fsn=130&adstar=0&clw=249#id=a6c3e244c17acabbebbb3ea10c13cbc4&currsn=0&ps=123&pc=123"),
  width: 100.0,
)

Image also provides a quick constructor Image.network for loading from the network, display pictures:

Image.network(
  "https://image.so.com/view?q=%E5%A4%B4%E5%83%8F&listsrc=sobox&listsign=5e2b6249a421975bae5d94f4a460b9e4&src=relation_qqimage&correct=%E5%A4%B4%E5%83%8F&ancestor=list&cmsid=8672a2655380efa68ffa17c13c3f2c40&cmras=1&cn=0&gn=0&kn=50&fsn=130&adstar=0&clw=249#id=a6c3e244c17acabbebbb3ea10c13cbc4&currsn=0&ps=123&pc=123",
  width: 100.0,
)

Properties
Image defines a set of attributes when displaying the picture, these parameters we can control the pictures show appearance, size, mixing effects. We look at the main attributes of Image:

const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

width, height: for setting image width, height, width and height when not specified, according to the limitations of the current picture is the parent container, its original size as a display, provided only if the width, height of one, the other property default scaling, but can be adapted to the rules specified by the fit property described below.
fit: This attribute is used in a picture display space and the image itself does not specify the image size adaptation mode simultaneously. Adaptation model is defined in the BoxFit, which is an enumerated type, have the following values:

the Fill : Fill stretches the full display space, the picture itself will change the aspect ratio, the picture will be deformed.
Cover : image aspect ratio will be enlarged by the center fill display space image is not deformed beyond the display space portion is trimmed.
Contain : This is the default adapt to the rules of the picture, the picture will zoom in to ensure that the case of the same aspect ratio of the picture itself to adapt to the current display space, the picture will not be deformed.
fitwidth : width of the image will be scaled to the width of the display space, the height will be scaled and centered, pictures will not be deformed beyond the display space portion is trimmed.
fitheight Fit the : image height scaled to the height of the display space, the width will be scaled and centered, pictures will not be deformed beyond the display space portion is trimmed.
none : no picture adaptation strategies, the picture will be displayed in the display space, if the picture is larger than the display space, display space displays only the middle part of the picture.
BoxFit

Image.asset(
      "images/head.jpg",
      width: 400,
      height: 100,
      color: Colors.red,
      colorBlendMode: BlendMode.colorDodge,
      fit: BoxFit.cover,//最常用
    );

alignment
settings alignment of the image, receiving a value of type Alignment

      Image.asset(
        "images/head.jpg",
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
        alignment: Alignment.bottomLeft,
      ),

colorBlendMode color and: may be carried out when the image for each pixel drawing color mixing process, mixing colors specified color, while the mixed mode colorBlendMode specified, the following is a simple example:

Image(
  image: AssetImage("images/head.jpg"),
  width: 300.0,
  height: 300.0,
  color: Colors.blue,
  colorBlendMode: BlendMode.difference,
);

Run as shown:
Here Insert Picture Description

repeat: When the display space size is less than the image itself, the picture specified repeat rule. A simple example is as follows:

Image(
  image: AssetImage("images/head.jpg"),
  width: 100.0,
  height: 100.0,
  repeat: ImageRepeat.repeatY ,
)

Image caching
Flutter frame of the picture is loaded through the cache (memory), the default maximum number of buffers is 1000, the maximum cache space for the 100M.

2 ICON

Flutter, you can use the same Web developers like iconfont, iconfont ie "Fonts icon", which is made icon font files, and then displays different images by different characters specified. And vector graphics can be used without having to worry about distortion, and the relatively small size

In the font file, each character corresponds to a bit code, and each bit code corresponds to a display font, different font refers to a different font, font corresponding to the character that is different. In iconfont, the only bit code corresponding to the shape of the icon is made, so a different character will eventually rendered into a different icon.

In Flutter development, iconfont has the following advantages and pictures compared:

Small size: installation package size can be reduced.
Vector: iconfont are vector icons, zoom will not affect its clarity.
You can apply text styles: You can change the color of the font icon, size, alignment, etc. as text.
By TextSpan can mix and text.

Construction method:

  const Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  })

Material Design using the Fonts icon
Flutter contains a set of default fonts Material Design icons in pubspec.yaml configuration file are as follows:

flutter:
  uses-material-design: true

Material Design icons can be viewed in all their official website: https: //material.io/tools/icons/
's look at a simple example:

String icons = "";
// accessible: &#xE914; or 0xE914 or E914
icons += "\uE914";
// error: &#xE000; or 0xE000 or E000
icons += " \uE000";
// fingerprint: &#xE90D; or 0xE90D or E90D
icons += " \uE90D";

Text(icons,
  style: TextStyle(
      fontFamily: "MaterialIcons",
      fontSize: 24.0,
      color: Colors.green
  ),
);

Operating results shown:
Here Insert Picture Description
you can see by this example, use the same icon as the use of text, but in this way we need to provide the code point of each icon, and this developer friendly, so, Flutter encapsulates IconData and Icon special font to display icons, the above example can also use the following ways:

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

Use custom font icons
, we can also use a custom font icon. There are a lot of font icons on iconfont.cn material, we can choose icons they need the package to download, will generate a number of different formats of font files, in Flutter, we can use ttf format.

Suppose we project requires the use of a book icon and micro-letter icon, we import the package to download:

Import Fonts icon file; the same font file and import this step, we assume that the font icon file in the project root directory, the path is "fonts / iconfont.ttf":

fonts:
 1. family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

For convenience, we define a MyIcons classes, functions and classes as Icons: All icons font file static variables are defined as:

class MyIcons{
  // book 图标
  static const IconData book = const IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple,),
    Icon(MyIcons.wechat,color: Colors.green,),
  ],
)

After running the results shown in Figure

PuTTY-tree

Published 13 original articles · won praise 38 · views 2554

Private letter concerns