Staggered View with dynamic height derived from the images provided by Backend Query

Widgets & Design

In the FF university content for staggered view, they manually add static images, and adjust their heights manually achieving the desired staggered multi height effect.

I am trying to do the equivalent, but instead using a backend query that returns the image URL, which is attached to each of the image widgets (Image Type: Network, Path: URL returned from query) rendered inside the staggered view.

I have yet to find a way to have each image in the Staggered View expand to its natural height. I had hoped the width would be restricted as it states in the University content, and the height would adjust based on the height of each image returned.

Is this the way it should work and I just don't know how to do it, or is this not supported?

What have you tried so far?

If I set height to a fixed value, I see the images, stacked like they would in a normal grid view. So, I tried setting the height to infinity, hoping that would let the height of the image use up the space it needs. Instead this just renders each image with no height.

I thought there might be a way to dynamically know and assign the image height to be the height of the image being returned for each instance going into the staggered view. The data coming back from the query is merely the URL pointing to the image, so I don't have access to the height property when trying to select a variable height (using the variable menu).

I thought maybe there would be a way to access the image widgets state and find out it's height once the image has been rendered, but I don't see anything in the dynamic height menu that would get me there

I attached two screenshots. One that shows how the images will show if i fix the height, and the other showing them gone when i try inf. In testing, I see fixed sized images (when height is set), and nothing (when inf height is set).

Did you check FlutterFlow's Documentation for this topic?
Yes
2
2 replies