Common Flutter Widget-Image Image

In Flutter, the Image component is used to load and display images. Let's take a look at the constructor first:

The construction parameters of Image are as follows:

• Image: get image from Provider
• Image.asset: load resource image
• Image.file: load a local image file
• Image.network: record network pictures
• Image.memory: load Uint8List resource image

Let's see how to use

class ImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.network('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
      ),
    );
  }
}

We loaded a web image. Other uses are also similar, so I won't repeat them here. Let's see how the provider is used.

class ImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
        ),
      ),
    );
  }
}

It can be seen that the effect is the same. ImageProvider is an abstract class. Flutter provides us with a set of implementations. Of course, we can also implement the provider ourselves.

This part is the ImageProvider provided by Flutter. In fact, the different constructors of the Image introduced at the beginning are implemented using different Providers. Let's take a look at other parameters.

Attributes	type	illustrate
image	ImageProvider	ImageProvider is an abstract class. Flutter provides us with a set of implementations. Of course, we can also implement the provider ourselves.
width/height	double	It is worth noting that the width and height settings of the display area should not be confused with the size of the Image itself. The Image Widget is just a container, and the container has its own size, and the display effect is often used in conjunction with the fill mode.
fit	BoxFit	Fill mode (detailed below).
color	Color	container color
colorBlendMode	BlendMode	Image blending mode, note that this parameter will only work if the color is mixed. https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html
alignment	Alignment	Controls the position of the image in the container.
repeat	ImageRepeat	Sets the repeat mode of the image when the container is larger than the image.
centerSlice	Rect	If the picture is stretched, then which point is the most important to start stretching.
gaplessPlayback	bool	When the provider changes, whether to keep the original image during reloading.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

fit: fill mode

BoxFit.fill does not stretch the display proportionally to the entire container.

BoxFit.contain Stretches and fills the container as much as possible while keeping the original image ratio.

BoxFit.cover ensures that the original image scales and fills the container, beyond the clipping.

We use a 200x200 image, we also set the size of the Image container to 200x200, we can see that the display is normal.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage(_path),
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

We now change the width to 400.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

It can be seen that the picture is enlarged and the excess part is cut off.

BoxFit.fitWidth scales proportionally, scaling the width until the width fills the container.

Let's change these parameters

width: 200, height: 500, fit: BoxFit.fitWidth,	width: 300, height: 500, fit: BoxFit.fitWidth,	width: 300, height: 200, fit: BoxFit.fitWidth,
Should display original ratio 200x200 size	Should display 300x300 size	The picture is scaled to 300x300, but part of it will be cut off

BoxFit.fitHeight scales year-to-year, and scales the width until the height fills the container (the effect is similar to fitWidth).

BoxFit.none does not perform any scaling, displays the original proportion, and clips if the container cannot fit.

BoxFit.scaleDown If the container cannot be displayed, the contain mode is adopted; if the container can be accommodated, none is adopted.

=========================================================================

color/colorBlendMode use red to blend with image

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          color: Colors.red,
          colorBlendMode: BlendMode.difference,
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.contain,
        ),
      ),
    );
  }

===============================================================

repeat set x repeat

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          colorBlendMode: BlendMode.difference,
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.contain,
          repeat: ImageRepeat.repeatX,
        ),
      ),
    );
  }

Summary: Image Widget can be used to display pictures in Flutter. There are many ways to obtain pictures, and you can also implement Provider yourself. The following articles will continue to introduce commonly used Widgets one by one. In the final series, a commercial-level project will be released, and interested friends will pay attention. If you find any mistakes during the reading process, please leave a message to me in time, and I will correct it as soon as possible. We also welcome all exchanges and common progress, thank you for your support!