Adjust GridView child height according to the dynamic content in flutter

Question

How to implement this complex view in the flutter?

I am trying to implement a GridView with n columns and the child should be of a certa

Answer 1

For any of the relatively simple ways of doing this (i.e. without a deep understanding how layout in flutter works), you are going to need to get the sizes of the images before you build anything. This is an answer that describes how to do that by using ImageProvier and ImageStream.

You could then use @aziza's example of flutter_staggered_grid_view once you know the basic dimensions of the images.

An alternative could be to store the image size or at least aspect ratio wherever you store the list of images/urls (I don't know how you're populating the list of images so I can't help you there).

If you want it to be fully based on the size of the images and not grid-like at all, you might be able to do it with a Flow widget. There is a caveat to flow though - I believe that it won't handle a large amount of items very well as it would have to lay all of the children out each time, but I could be wrong about that. If you don't have a huge amount of items, you could use Flow + a SingleChildScrollView for the scrolling part.

If you are going to have a large amount of items (and/or want to do something like dynamic loading of new items), you might have to do something with a CustomMultiChildLayout - I think it would be more efficient but you'd still need to do something to know the sizes of the images.

A last possible solution (I don't know exactly how this would work though) would be to have two scrollable views side-by-side and synchronize their positions. You'd have to set shrinkwrap=true though so you could do the scrolling, and you'd still have to know the height of each image so you could decide which side to put each one in.

Hope that helps you get started at least!