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 modecolorBlendMode
Its default value isBlendMode.srcIn
Skia 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