Image of the basic component of the shutter

A picture is worth a thousand words , A clear picture is better than N Nonsense , So the display of pictures is very important ,Image yes Flutter Controls for displaying pictures , It can load the pictures in the project 、 Pictures stored in the mobile phone and loaded directly from the network , It is very convenient to load network pictures without integrating the picture loading framework .

1 Construction method

Image({Key key, @required ImageProvider image, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low })

Create a Image Components , One of the required parameters is ImageProvider, It specifies where the image is loaded from , From the project or the network, etc . 

Image.asset(String name, { Key key, AssetBundle bundle, String semanticLabel, bool excludeFromSemantics: false, double scale, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, String package, FilterQuality filterQuality: FilterQuality.low })

Create a file that loads pictures from the resource directory in the project Image, In fact, it is equivalent to that the first construction method specifies ImageProvider by AssetImage.

Image.file(File file, { Key key, double scale: 1.0, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low })

Create a to load pictures from the phone storage directory Image, In fact, it is equivalent to that the first construction method specifies ImageProvider by FlieImage.

Image.memory(Uint8List bytes, { Key key, double scale: 1.0, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low })

It should be to create a file that loads pictures from memory or byte stream Image, In fact, it is equivalent to that the first construction method specifies ImageProvider by MemoryImage.

Image.network(String src, { Key key, double scale: 1.0, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low, Map<String, String> headers })

Create a to load pictures from the network Image, In fact, it is equivalent to that the first construction method specifies ImageProvider by NetworkImage.

In fact, the last four construction methods are equivalent to encapsulating the first construction method , Don't pass in ImageProvider nothing more , But still pass in the image path , So it doesn't save much , I prefer the first construction method .

 

2 Common properties

image： Where to load pictures , It's worth one ImageProvider object ,ImageProvider The implementation classes of are AssetBundleImageProvider（AssetImage Inherited from it ）、FileImage、MemoryImage、NetworkImage, It should be noted that , If you choose AssetImage Load pictures from the resource directory , Need to be in pubspec.yaml Configuration in profile assets Catalog ：

It must be the hierarchical relationship above , But I feel that there is always a problem loading pictures from the resource directory , Sometimes it doesn't show but doesn't report an error , Try following the directory with the specific file name , namely ：

But every picture has to be configured , It's too much trouble , And choose NetworkImage Loading images from the network is much easier , You only need to specify the url that will do .

width and heigh： Width and height , There's no need to repeat .

alignment： If the picture doesn't fill the container , Alignment of pictures , It's worth one AlignmentGeometry object ,Alignment Is one of its implementation classes , The optional values are the same as Container Of Alignment Same value .
    Alignment.topLeft： Align vertically to the top and horizontally to the left .
    Alignment.topCenter： Align vertically to the top and horizontally to the center .
    Alignment.topRight： Align vertically to the top and horizontally to the right .
    Alignment.centerLeft： Align vertically and horizontally to the left .
    Alignment.center： Align vertically and horizontally .
    Alignment.centerRight： Vertically centered, horizontally right aligned .
    Alignment.bottomLeft： Align vertically to the bottom and horizontally to the left .
    Alignment.bottomCenter： Align vertically to the bottom and horizontally to the center .
    Alignment.bottomRight： Align vertically to the bottom and horizontally to the right .
     In addition to the constants above , You can also create Alignment Object designation x、y Offset .

color： Set the color on the picture , It's worth one Color object , Will be covered image Specified picture , If it is also set colorBlendMode attribute , Will be with image Mixing produces special effects .

colorBlendMode： Color blend mode , similar BoxDecoration Of backgroundBlendMode.

excludeFromSemantics： Whether to enable semantic description of images .

filterQuality： The quality level of the image filter （ Using this attribute has not seen any effect , Later, it is used for further research ）.

fit： How the picture is scaled , similar Android in ImageView Of scaleType, Optional values are ：
    BoxFit.none： Center the contents of the picture in its original size .
    BoxFit.contain： Center the contents of the picture completely , By scaling down or original size Make the picture wide / The height is equal to or less than the width of the component / high , similar Android Of centerInside.
    BoxFit.cover： Zoom in on the picture size centered , similar Android Of centerCrop.
    BoxFit.fill： Enlarge the picture out of scale / Reduce the display to the size of the component , similar Android Of fitXY.
    BoxFit.fitHeight： Display the height of the picture according to the height of the component , Wide proportional magnification / narrow .
    BoxFit.fitWidth： Display the width of the picture according to the width of the component , High scale magnification / narrow .
    BoxFit.scaleDown： If the width and height of the picture is greater than the width and height of the component , Then the picture content is completely centered , Same at this time contain, If the picture width and height is less than the component width and height , Then the picture will be displayed in the middle according to the original size , Same at this time none.

centerSlice： This property is used for .9 The center of the graph is stretched , It's worth one Rect object , It should be the stretch area , I use this attribute only when fit Set to contain and fill Only then saw the effect , This attribute should also be used for graphic transformations , Not commonly used .

gaplessPlayback： When ImageProvider After the change , In the process of reloading the picture , Whether the display of the original picture remains .true Express reservation ,false No reservation , Directly blank and wait for the next picture to load .

matchTextDirection： This attribute value indicates whether the direction of the picture follows the direction of the text , In fact, it is equivalent to turning left and right ,true It means flip ,false Means not to flip , But for this attribute to take effect , You have to use Directionality Package of components Image Components , Like the following code ：

new Directionality(
    textDirection: TextDirection.rtl,
    child: new Image(
        image: new NetworkImage(imgUrl),
        matchTextDirection: true,
    ),
)

In the above code textDirection The property value is TextDirection.rtl, From right to left , then Image The picture direction of the component follows the text direction from right to left , That is, it is equivalent to the effect of turning left and right .

repeat： If the picture doesn't fill the container , How the picture repeats , Optional values are ：
    ImageRepeat.noRepeat： No repetition .
    ImageRepeat.repeat：X、Y The axes repeat .
    ImageRepeat.repeatX： Only in X Axis repeat .
    ImageRepeat.repeatY： Only in Y Axis repeat .

semanticLabel： Semantic description of image , similar Android in ImageView Of contentDescription attribute .

 

The following is a that sets some of the above properties Image Component's demo：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    var imgUrl =
//        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545191828292&di=caef0d773e90142191de9fc5f5871cef&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fupload%2F20170807%2Fb008bbf3df1b490d85e3ff3152ea898e_th.jpg";
    var imgUrl =
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545790666&di=45beff1e706ea81d796d2268553c9e6f&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.music.126.net%2FfydScGuKzV4GFdqeCMKhxQ%3D%3D%2F109951163178133629.jpg%3Fparam%3D180y180";
    return MaterialApp(
      // Whether or not shown  debug  label 
      debugShowCheckedModeBanner: false,
      title: "Image",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Image"),
        ),
        body: new Container(
          color: new Color(0xFFFF0000),
          // Child components 
          child: new Image(
            // Load pictures from the resource directory , Need to be in  pubspec.yaml  Configuration in profile  assets  Catalog 
            //flutter:
            //  assets:
            //    - assets/images/
            // It must be the hierarchical relationship above , But I feel that there is always a problem loading pictures from the resource directory , Sometimes it doesn't show but doesn't report an error , Try following the directory with the specific file name , namely 
            //flutter:
            //  assets:
            //    - assets/images/iverson.jpg
            // But every picture has to be configured , It's too much trouble 
//            image: new AssetImage("assets/images/iverson.jpg"),
            // Load images from the web , Very easy to , Don't need to configure , And as long as there is a network, there is no problem 
            image: new NetworkImage(imgUrl),
            width: 300,
            height: 200,
            // If the picture doesn't fill the container , Alignment of pictures , It's worth one  AlignmentGeometry  object ,Alignment  Is one of its implementation classes 
            // The optional values are the same as  Container  Of  Alignment  Same value .
            //Alignment.topLeft： Align vertically to the top and horizontally to the left 
            //Alignment.topCenter： Align vertically to the top and horizontally to the center 
            //Alignment.topRight： Align vertically to the top and horizontally to the right 
            //Alignment.centerLeft： Align vertically and horizontally to the left 
            //Alignment.center： Align vertically and horizontally 
            //Alignment.centerRight： Vertically centered, horizontally right aligned 
            //Alignment.bottomLeft： Align vertically to the bottom and horizontally to the left 
            //Alignment.bottomCenter： Align vertically to the bottom and horizontally to the center 
            //Alignment.bottomRight： Align vertically to the bottom and horizontally to the right 
            // In addition to the constants above , You can also create  Alignment  Object designation  x、y  Offset 
            alignment: Alignment.center,
            // Set the color on the picture , It's worth one  Color  object , Will be covered  image  Specified picture , If it is also set  colorBlendMode  attribute , Will be with  image  Mixing produces special effects 
            color: new Color(0xFFFFFF00),
            // Color blend mode , similar  BoxDecoration  Of  backgroundBlendMode
            colorBlendMode: BlendMode.darken,
//            excludeFromSemantics: true,
//            filterQuality: FilterQuality.high,
            // How the picture is scaled , similar  Android  in  ImageView  Of  scaleType, Optional values are ：
            //BoxFit.none： Center the contents of the picture in its original size .
            //BoxFit.contain： Center the contents of the picture completely , By scaling down or original  size  Make the picture wide / The height is equal to or less than the width of the component / high , similar  Android  Of  centerInside.
            //BoxFit.cover： Zoom in on the picture  size  centered , similar  Android  Of  centerCrop.
            //BoxFit.fill： Enlarge the picture out of scale / Reduce the display to the size of the component , similar  Android  Of  fitXY.
            //BoxFit.fitHeight： Display the height of the picture according to the height of the component , Wide proportional magnification / narrow .
            //BoxFit.fitWidth： Display the width of the picture according to the width of the component , High scale magnification / narrow .
            //BoxFit.scaleDown： If the width and height of the picture is greater than the width and height of the component , Then the picture content is completely centered , Same at this time  contain, If the picture width and height is less than the component width and height , Then the picture will be displayed in the middle according to the original size , Same at this time  none.
            fit: BoxFit.contain,
//            centerSlice:new Rect.fromCircle(center: Offset(100.0, 100.0), radius: 10.0),
//            gaplessPlayback: true,
            matchTextDirection: true,
            // If the picture doesn't fill the container , How the picture repeats , Optional values are ：
            //ImageRepeat.noRepeat： No repetition 
            //ImageRepeat.repeat：X、Y  The axes repeat 
            //ImageRepeat.repeatX： Only in  X  Axis repeat 
            //ImageRepeat.repeatY： Only in  Y  Axis repeat 
            repeat: ImageRepeat.noRepeat,
//            semanticLabel: "",
          ),
        ),
      ),
    );
  }
}

 

The operation effect is as follows ：

 

3 summary

Flutter Load network pictures Android Be a little simpler , However, you may need some configuration to load the images in the project package , This can have both advantages and disadvantages , Most commonly used Text and Image After looking at the components, I found that it is not difficult , There is no reason not to continue , Come on, young man .