Image, as the most commonly used Widget in daily life, is also the easiest to ignore. In daily life, the Widget usually only uses Image to display Image attributes, but Image itself is very powerful and has many attributes that the Widget is not familiar with. Today’s tip reintroduces the Image Widget;

Image

Image, as a Widget that supports displaying multiple Image formats, provides multiple constructors;

  • Image() is used to get Image resources from the ImageProvider;
  • Image.asset() is used to retrieve project catalog Image resources from AssetBundle;
  • Image.network() is used to fetch web image resources from urls;
  • Image.file() is used to get local Image resources from file;
  • Image.memory() is used to fetch memory Image resources from the Uint8List;

Source code analysis

Const Image({Key Key, @required this.frameBuilder, // frameBuilder this.loadingBuilder, / / loading process frame enclosing the constructor errorBuilder, / / failure state frame structure, enclosing semanticLabel, enclosing excludeFromSemantics = false, enclosing the width, // This. Color, // this. ColorBlendMode, // Blend this. This. Repeat = ImageRepeat. NoRepeat, // This. CenterSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.isAntiAlias = false, this.filterQuality = FilterQuality.low, })Copy the code

Simple analysis of the source code shows that Image, as a stateful StatefulWidget, is mainly used to set Image resources through Image attributes, and a variety of additional attributes to support more diverse display effects of images. Small dishes to try to learn one by one;

Case try

1. image

Image uses an ImageProvider to display images. Flutter provides a variety of methods that correspond to various naming constructs.

_imageWid00(isNet) => Image(
    image: isNet
        ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')
        : AssetImage('images/icon_hzw01.jpg'));
Copy the code

2. frameBuilder

typedef ImageFrameBuilder = Widget Function(
  BuildContext context,
  Widget child,
  int frame,
  bool wasSynchronouslyLoaded,
);
Copy the code

The frameBuilder is used to control the widget signature during Image construction, where the child holds the default Image Image and cannot be empty; Frame is the subscript of the number of frames to render the Image. The default frame is the first frame. You can use the frameBuilder to set the basic image style.

_imageWid01(isNet) { return Image( frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (18.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }, image: isNet ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg') : AssetImage('images/icon_hzw01.jpg')); }Copy the code

3. loadingBuilder

LoadingBuilder loads the state frame constructor, the Image constructor shown during loading; As you can see from the image, two inner margins are set, because the inner margins are set to the child in the loading state and after loading state.

_imageWid02(isNet) { return Image( frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (18.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }, loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) { return Container( padding: Edgeinset.all (18.0), color: color.green. WithOpacity (0.4), child: child); }, image: isNet ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg') : AssetImage('images/icon_hzw01.jpg')); }Copy the code

4. errorBuilder

ErrorBuilder replaces the constructor displayed by Image when failure occurs;

_imageWid03(isNet) { return Image( frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (18.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }, loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) { return Container( padding: Edgeinset.all (18.0), color: color.green. WithOpacity (0.4), child: child); }, errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) { return Container( height: Top color: color.grey.withopacity (0), child: Center(child: Icon(Icons. Error))); top color: color.grey.withopacity (0), child: Center(child: Icon(Icons. }, image: isNet ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl11.jpg') : AssetImage('images/icon_hzw0111.jpg')); }Copy the code

5. width & height

Width & height: set the image display width and height size;

_imageWid05(width, height) => Image(image: AssetImage('images/icon_hzw01.jpg'), width: width, height: height);
Copy the code

6. color & colorBlendMode

Color & colorBlendMode Is used in conjunction with the blending mode of drawing, which can be used to create other effects, such as black and white mode, X-ray effects, etc. Before xiao CAI tried;

_imageWid06(isNet, index) { BlendMode blendMode; if (index == 0) { blendMode = BlendMode.difference; } else if (index == 1) { blendMode = BlendMode.screen; } else if (index == 2) { blendMode = BlendMode.hardLight; } else { blendMode = BlendMode.colorBurn; } return Image (color: Colors. IndigoAccent. WithOpacity (0.4), colorBlendMode: blendMode, Image: isNet? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg') : AssetImage('images/icon_hzw01.jpg')); }Copy the code

7. alignment

Alignment is the alignment mode within the boundary; If the image resource size is smaller than the image size, you can adjust the image Alignment.

_imageWid07(index) { Alignment alignment; if (index == 0) { alignment = Alignment.topLeft; } else if (index == 1) { alignment = Alignment.center; } else { alignment = Alignment.bottomRight; } return Image( image: AssetImage('images/icon_wechat_moments.png'), alignment: alignment, height: 120, frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (2.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }); }Copy the code

8. repeat

Repeat is the style of covering the uncovered area of the picture, including horizontal or vertical tiling effect;

_imageWid08(index) { ImageRepeat repeat; if (index == 0) { repeat = ImageRepeat.repeatX; } else if (index == 1) { repeat = ImageRepeat.repeatY; } else { repeat = ImageRepeat.repeat; } return Image( image: AssetImage('images/icon_wechat_moments.png'), repeat: repeat, height: 120, frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (18.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }); }Copy the code

9. fit

Fit is the distribution effect of pictures in the layout;

  • Boxfit. fitWidth: The overall image resource is enlarged or shrunk based on the image width;
  • Boxfit. fitHeight: The overall image resource zooming in and out based on the image height;
  • Boxfit. fill: the whole picture is filled with the width and height of the picture, can be stretched or compressed, etc.
  • BoxFit. Contain: Enlarge or reduce the whole picture to the maximum width or height, and display the whole picture in the middle of the width and height;
  • Boxfit. cover: The overall picture is scaled up or down to the minimum width or height that can be accommodated and shown in the center;
  • Boxfit. scaleDown: The overall image is larger than the set size, scaled down and centered; If the overall picture is smaller than the set size, it is not processed and displayed in the center;
_imageWid09(index) { BoxFit fit; if (index == 0) { fit = BoxFit.fitWidth; } else if (index == 1) { fit = BoxFit.fitHeight; } else if (index == 2) { fit = BoxFit.fill; } else if (index == 3) { fit = BoxFit.cover; } else if (index == 4) { fit = BoxFit.contain; } else { fit = BoxFit.scaleDown; } return Image( image: AssetImage('images/icon_hzw03.jpg'), fit: fit, height: 120, frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { return Container( padding: EdgeInsets. All (2.0), color: Colors. DeepOrange. WithOpacity (0.4), the child, the child); }); }Copy the code

10. centerSlice

CenterSlice is used to set up a rectangle, similar to the.9. PNG image, for a fixed range of stretching; Note that the type of fit cannot be boxfit. none or boxfit. cover.

_imageWid10(index) {
  Rect rect;
  if (index == 0) {
    rect = null;
  } else if (index == 1) {
    rect = Rect.fromLTWH(100, 100, 50, 50);
  } else if (index == 2) {
    rect = Rect.fromLTWH(50, 50, 50, 50);
  }
  return Image(
      fit: BoxFit.contain,
      width: 250,
      height: 250,
      centerSlice: rect,
      image: AssetImage('images/icon_music.png'));
}
Copy the code

Image case source

Xiao CAI’s learning of Image is limited to basic applications, and he has a further understanding of attributes that are not commonly used, but his learning of source code is not deep enough. If there are mistakes, please give more guidance!

Source: Little Monk A Ce