Flutter Lesson -Image

preface

A picture is something we love and hate, the source of all beauty and all evil

In order to clarify the use of Image, this article is specially designed. I hope that you can learn a useful method through this article. In addition, through the final layout of One Piece’s reward order, the effect of changing the head, name and reward can be basically realized, and it can be zoomed

1. Simple understanding of Image

1.1: attribute of Image

First Image exists as components in widgets/Image. The dart, the dart, also have an Image in the UI class, don’t wrong

Second, as a stateful component,Image inherits from StatefulWidget with the following properties:

class Image extends StatefulWidget { const Image({ Key key, @required this.image, Enclosing semanticLabel, / / semantic tag enclosing excludeFromSemantics = false, This.width,// this.height,/ / this.color,// color this.colorblendMode,// Color blending mode this.fit,// Image alignment mode this.alignment = Alignment. Center,// Align this.repeat = ImageRepeat. NoRepeat,// Repeat this.centerSlice, this.matchTextDirection = false, This.gaplessplayback = false, this.filterquality = filterQuality. Low,// filterQuality}) : assert(image! = null), assert(alignment ! = null), assert(repeat ! = null), assert(filterQuality ! = null), assert(matchTextDirection ! = null), super(key: key); final ImageProvider image; final double width; final Color color; final BlendMode colorBlendMode; final BoxFit fit; final AlignmentGeometry alignment; final ImageRepeat repeat; final Rect centerSlice; final bool matchTextDirection; final bool gaplessPlayback; final String semanticLabel; final bool excludeFromSemantics;Copy the code

1.2. Create the Image object

There are five ways to create an Image component object, depending on your requirements

Const Image({Key Key,@required this. Image,// Create Image.network via ImageProvider (String SRC, // Create image. file from network resources (file file, {// create image. asset(String name, // create image. memory(Uint8List bytes, // create Image from network resourcesCopy the code

1.3: Access to resource pictures

There is a long comment in image. asset explaining how to use resource images in FLUTTER

var img = Image.asset(
  'images/icon_head.png',
  width: 50,
  height: 50,
);
Copy the code

1.4: the state of the Image

Image is a stateful component, which is really surprising to me, so let’s see what its states are

class _ImageState extends State<Image> {
  ImageStream _imageStream;
  ImageInfo _imageInfo;
  bool _isListeningToStream = false;
  bool _invertColors;
Copy the code

2. Attribute representation of Image

2.1: the Image of wide high

Put the 3:2 image in a 200 x 200 container and it looks like this

var img = Image.asset(
  'images/ls.jpg',
  width: 100,
  height: 100,
);

var imgContainer=Container(
  width: 200,
  height: 200,
  color: Colors.cyanAccent,
  child: img,
);
Copy the code

It can be seen that:

1. By default, the Image is displayed completely. 2. The length and width defined by the Container are invalid.

2.2: Adaptation mode of pictures:fit

To facilitate comparison, a batch generation method is written here to see the characteristics of the various patterns.

var fitMode = [BoxFit.none, BoxFit.contain, BoxFit.cover, BoxFit.fill, BoxFit.fitHeight, BoxFit.fitWidth, BoxFit.scaleDown ]; Form () {var imgLi = <Widget>[]; fitMode.forEach((fit) { var img = Container( margin: EdgeInsets.all(10), width: 150, height: 60, color: randomRGB(), child: Image( image: AssetImage("images/ls.jpg"), fit: fit, )); imgLi.add(Column( children: <Widget>[img, Text(fit.toString())], )); }); return imgLi; } var imgBox = Wrap( children: form(), ); Color randomRGB() { Random random = new Random(); int r = 30 + random.nextInt(200); int g = 30 + random.nextInt(200); int b = 30 + random.nextInt(200); return Color.fromARGB(255, r, g, b); }Copy the code

• Aspect ratio 2:3 test results:

• Width to height ratio 3:2 test results:

• Test results for images smaller than the container size

If you look at the picture, it should speak for itself.

2.3: Color and Blending mode:color,colorBlendMode

Also, batch test, a picture is worth a thousand words, and feel a bit taller

Here I overlay the head with blue, and it looks like this:

/ var/mixed mode array colorBlendMode = [BlendMode. Clear, BlendMode. SRC, BlendMode DST, BlendMode.srcOver,BlendMode.dstOver,BlendMode.srcIn, BlendMode.dstIn,BlendMode.srcOut,BlendMode.dstOut, BlendMode.srcATop,BlendMode.dstATop,BlendMode.xor, BlendMode.plus, BlendMode.modulate,BlendMode.screen, BlendMode.overlay,BlendMode.darken,BlendMode.lighten, BlendMode.colorDodge,BlendMode.colorBurn,BlendMode.hardLight, BlendMode.softLight,BlendMode.difference,BlendMode.exclusion, BlendMode.multiply,BlendMode.hue,BlendMode.saturation, BlendMode.color, BlendMode.luminosity, ]; FormImgsColorBlendMode () {var imgLi = <Widget>[]; colorBlendMode.forEach((mode) { var img = Container( margin: EdgeInsets.all(5), width:60, height: 60, child: Image( image: AssetImage("images/icon_head.png"), color: Colors.blue, colorBlendMode: mode, )); imgLi.add(Column(children: <Widget>[ img, Text(mode.toString().split(".")[1]) ])); }); return imgLi; } var imageColorMode = Wrap( children: formImgsColorBlendMode(), );Copy the code

If there is any need for analog mode, enumeration of what, can be generated in batches through this way, the effect is good and save trouble.

4. Align attributes:alignment

There are nine static constants, which are nine azimuths respectively. In addition, Alignment can also be offset by the construction method of Alignment

var alignments = [ Alignment.center, Alignment.centerLeft, Alignment.centerRight, Alignment.topCenter,Alignment.topLeft, Alignment.topRight, Alignment bottomCenter, Alignment bottomLeft, Alignment. BottomRight, Alignment (0.01, 0.01), Alignment (0.5, 0.5)]; FormImgAlignments () {var imgLi = <Widget>[]; alignments.forEach((align) { var img = Container( margin: EdgeInsets.all(7), width: 150, height: 60, color: randomRGB(), child: Image( image: AssetImage("images/wy_300x200_little.jpg"), alignment: align, )); imgLi.add(Column( children: <Widget>[img, Text(e.toString())], )); }); return imgLi; } var imageAlignments = Wrap( children: formImgAlignments(), );Copy the code

2.5. Repeated Patterns:repeat

At a glance, not much to say

var repeats = [ ImageRepeat.repeatY, ImageRepeat.repeatX, ImageRepeat.noRepeat,ImageRepeat.repeat ]; FormImgRepeat () {var imgLi = <Widget>[]; repeats.forEach((repeat) { var img = Container( margin: EdgeInsets.all(7), width: 150, height: 90, color: randomRGB(), child: Image( image: AssetImage("images/wy_300x200_little.jpg"), repeat: repeat, )); imgLi.add(Column( children: <Widget>[img, Text(repeat.toString())], )); }); return imgLi; } var imageRepeats = Wrap( children: formImgRepeat(), );Copy the code

1.5: Zoom quality:filterQuality

Use FilterQuality. Low to use quadratic interpolation when scaling images

FilterQuality. Hight is the best and slowest algorithm to use when scaling an image, usually cubic interpolation or better FilterQuality. Medium speeds are between low and hight, It is usually a combination of quadratic interpolation and cone parameter pre-filtering (MIpmaps). It sounds nice, but it feels that way. Hight really feels better than None

var qualitys = [ FilterQuality.none,FilterQuality.high, FilterQuality.medium, FilterQuality.low, ]; FormImgQualitys () {var imgLi = <Widget>[]; < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px; randomRGB(), child: Image( image: AssetImage("images/wy_300x200.jpg"), filterQuality: q, )); imgLi.add(Column( children: <Widget>[img, Text(q.toString())], )); }); return imgLi; } var imageQualitys = Wrap( children: formImgQualitys(), );Copy the code

3. One Piece

There are no custom components for now. Here is no analysis, interested partners have a look, you can also customize a component to play.

Const double viewRate = 0.663306; // Const double imgRate = 1.234411; Var width =300.0; double height = width/viewRate; var textWanted= Text('WANTED', style: TextStyle( fontWeight: FontWeight.bold, letterSpacing:width/30, fontSize: width/6), ); var name =Text('NA MI', style: TextStyle( fontWeight: FontWeight.bold, fontSize: width/9), ); Var price= Text(' 16000,000 ', style: TextStyle(letterSpacing:width/45, fontWeight: fontWeight. Bold, fontSize: width/10), ); var img =Container( decoration: BoxDecoration( border: Border.all(color: Colors.black,width: width/100), ), width: Image. Asset ('images/ name.jpg ',fit: boxfit.cover,); var bottom =Stack( children: <Widget>[ Image.asset('images/bottom.jpg',fit: BoxFit.fitWidth,), Container(child: name,alignment: Alignment.topCenter,padding: EdgeInsets.only(top: 6*width/100),), Container(child: price,alignment: Alignment.topCenter,padding: EdgeInsets.only(top: 17*width/100),) ],); var wanted = Container( width: width, height: height, color: Color(0xffded0b5), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[textWanted,Padding(padding: Edgeinset.fromltrb (5*width/100,0,5*width/100,5*width/100),child: img,),),); var result=Card(child:wanted ,elevation: 5*width/100,); // Final componentCopy the code

This is the end of this article. If you want to taste Flutter quickly, Flutter For Seven days is a must-have. If you want to explore it, follow in my footsteps and complete a Flutter tour. In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. My wechat account is ZDL1994328.