top of page

[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.

Recent Posts

See All

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page