[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 AllWhat want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to...
What want to do There is a variable that remain unchanged once the initial value is determined. However, it cannot be determined yet when...
What want to do As the title suggests. Place two widgets in one line on the screen One in the center of the screen and the other on the...
Comments