[Flutter/dart] Arrange images of different sizes

Overview

I think that you often arrange images on the screen in a smartphone app.

When displaying images uploaded by users or images downloaded from the Internet, the sizes of the images are often not the same.

It doesn't really matter if you line up in one column like Twitter. All you have to do is decide on the width and adjust the length to fit it.

However, if you want to line up in two or more columns, it will be a little troublesome.

This time, I thought about what to do in such a case.

Details

1 Arrange with the original aspect ratio

Determine the width and adjust the length to preserve the aspect ratio of the original image. In this case, the height of each row will not be the same.

Pinterest takes this approach.

2 Cut out and display in the specified size

The second method is to fix the area where the image is placed, and if the image does not fit in it, cut it out and display it. Tap to see the whole.

Instagram and Google Drive take this approach.

By the way, if the power of the application side becomes stronger as Instagram, users uploading the image will become aware of the size.

Implementation

I chose 2 for my app shoes_keep. Below is the implementation in flutter.

static Widget ImageContainer({double height, double width, double cornerRadius, ImageProvider image, Widget child}){
  return Container(
    width: width,
    height: height,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(cornerRadius)),
      image: DecorationImage(
        fit: BoxFit.cover,
        image: image
      )
    ),
    child: child
  );
}

"height" and "width" are the height and width of the display area, "cornerRadius" is the curvature of the corner, "image" is the image, and "child" is the widget to display below the image.

Boxfit.cover will crop the image if it is larger than the display area.（参考）

Use as follows.

ImageContainer(
  width: 100,
  height: 100,
  cornerRadius: 0,
  image: Image.file(filePath).image
),

It is displayed like this in shoes_keep. (It's hard to understand because I chose the size of the image well)

Lastly

Only Pinterest has adopted method 1. Implementation seems to be quite difficult.