This is the 21st day of my participation in Gwen Challenge

preface

In the last part, we talked about the five loading methods of Image. In this part, we will talk about the deployment of various parameters of Image and display effect in detail.

Our agreement

Since this article discusses the general methods of Image abstraction, we will simply use Image.net Work as a demonstration example to achieve this effect.

// Image url, parameter width can be adjusted at any time
String url =
  'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=375';
// Load the image
Image.network(url)
Copy the code

Commonly used parameters

Width, height

Here we will talk about the following three situations in default zoom mode

  • Set width only
Image.network(
  url,
  width: 200.)Copy the code

Fill the width as full as possible and scale the height equally

  • Setting height only
Image.network(
  url,
  height: 200.)Copy the code

Fill the height as full as possible and scale the width equally

  • Set the width of high
// Add a background aid here
Container(
  color: Colors.orange,
  // Display the image
  child: Image.network(
    url,
    // Set width and height to 200
    width: 200,
    height: 200,),)Copy the code



Here we set the width and height to be the same, but the image is not a rectangle, so we will try to fill in the long side as much as possible, and then scale the short side equally

Fill the long side as much as possible and scale the short side equally

Alignment = alignment

Here we set the image to a width of 200

/ / picture url
String url =
  'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100';
// Auxiliary background
Container(
  color: Colors.orange,
  child: Image.network(
    url,
    width: 375,
    height: 375.// Set the alignment
    alignment: Alignment.center,
  ),
)
Copy the code

The alignment here is actually the same as what we talked about before

Alignment.topLeft Alignment.topCenter Alignment.topRight
Alignment.centerLeft Alignment. Center (default) Alignment.centerRight
Alignment.bottomLeft Alignment.bottomCenter Alignment.bottomRight

To learn a skill

If we want to enter Alignment. BottomCenter we can enter alibc

To change the alignment, type BC directly after

The zoom

Usually setting the width and height can not meet our needs, for example, the head should be as small as possible to fill the zoom, then it is necessary to adjust by setting the zoom mode, is the following effect

/ / the background
Container(
  color: Colors.orange,
  width: 375,
  height: 375,
  alignment: Alignment.center,
  // Elliptical clipping
  child: ClipOval(
    // Set the profile picture
    child: Image.network(
      url,
      width: 100,
      height: 100.// Set the zoom
      fit: BoxFit.cover,
    ),
  ),
)
Copy the code



Now that you have a rounded head, let’s take a look at all the zooming and zooming

List of zoom modes

Here we continue with the code from the previous two steps

Container(
  color: Colors.orange,
  // Elliptical clipping
  child: Image.network(
    url,
    width: 375,
    height: 375,
    fit: BoxFit.scaleDown,
  ),
)
Copy the code
Boxfit. scaleDown (default) contains no folder Boxfit.fill (Fill width and height, stretch picture) BoxFit. Contain (width, height, scale)
Boxfit.cover (minimum edge fill, proportional scaling) Boxfit.fitwidth (fill width, proportional scaling) Boxfit.fitheight (Fill height, proportional scaling)
Boxfit.none (Image size ratio unchanged, no more than no fill, more than crop) BoxFit.none(100×100)

Combining with the alignment

These are all shown in the center mode by default. Let’s drill down a little bit further and see what the alignment looks like. Here we use boxfit.cover for this effect

Alignment.topLeft Alignment.center Alignment.bottomRight

As can be seen here, we have taken 3 “shots” from the top left corner to the bottom right corner. We will not show more combination methods, you can just understand.

Color mixing

ColorBlendMode Color blending mode refers to the algorithm used by Canvas to blend pixels when drawing images.

Usage scenarios

We usually use it when coloring images (like the ICONS below), but also in some filter scenes.

// The color is not set
Image.asset(
  'icon_home_unselect.png'.icon,
)
// Set the color blue
Image.asset(
  'icon_home_unselect.png'.icon,
  color: Colors.blue,
)
Copy the code

Blend Mode effects

If we set color directly to the image, this would be the case

Container(
  color: Colors.orange,
  // Elliptical clipping
  child: Image.network(
    url,
    width: 375,
    height: 375,
    fit: BoxFit.contain,
    color: Colors.blue,
    // colorBlendMode: BlendMode.plus,),Copy the code



The picture is gone, it’s just blue. Now why? It’s just color blending modecolorBlendModeIts default value isBlendMode.srcInSkia comes with 29 blend modes. Here are three of them and the rest in more detailFlutter 和 skia The document.

BlendMode.color BlendMode.plus BlendMode.hue

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • Image (Flutter Widget of the Week)
  • Flutter-Image
  • Flutter-BlendMode
  • Skia – skblendmode

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible