Set element widths in percent?

[wyxcoder]

I want to set elements according to the screen size, when the screen width is enough, I want to show element side by side, like in above screenshot, four elements, two on left with width one third of the Gridview width, and the right elements with two third of the width. When screen width is small, just display all elements from top to bottom.

Is this doable with flutter_layout_grid?

Thanks!

[shyndman]

You can definitely do the widths no problem.

Take a look at this example: https://github.com/shyndman/flutter_layout_grid/blob/main/example/lib/responsive_app_layout.dart

It demonstrates a layout that changes depending on the screen width.

In order to get the layout into thirds, you're going to want to use the fractional unit (fr). 1.fr for the first column, 2.fr for the second.

The tricky part is actually the heights (at least if card 1 and card 2 contain arbitrary content). I have to think about that a bit more. I'll get back to you.

In the meantime, try that example out. You might be able to get something looking acceptable by playing around with things.