0

I have a design which is like this : screen :

I have tried using StaggeredGridView.count, StaggeredGridView.countBuilder and also Sliver Grid, but I didn't get the expected result because the UI has to be in the center of any device and should look like the image. The data would be from an API, so it has to be dynamic.

Any help would be appreciated.

Please find the image of the design to be achieved. And here's my repo where is some code I tried: https://github.com/marimeli/custom-layout/blob/master/lib/main.dart

Melissa Casas
  • 33
  • 1
  • 7
  • Conceptually, is this suppose to be a grid (infinite amount of items)? If not, you should try a simpler approach. – Hugo Passos Feb 20 '20 at 14:09
  • Just 12 items by now. Could you give an idea of what should I review to get a simpler approach? – Melissa Casas Feb 21 '20 at 15:41
  • I was thinking about @JMo's suggestion. You can get this done by placing a `Column` with some `Row`s wrapping `Expanded`s. That's not an elegant approach, thought. – Hugo Passos Feb 21 '20 at 16:55
  • However, it seems a better fit in this situation, since you want everything to be at the center and not scrollable (I guess?). Those specifications are against grid concept. – Hugo Passos Feb 21 '20 at 16:58
  • I tried what @JMo suggested, using static data, but in my opinion the code is not so clean. Can you check the link of my repo? I updated with the solution you both propose. Maybe you can help me to get it better, considering it should be dynamic data. – Melissa Casas Feb 21 '20 at 23:01

1 Answers1

-1

Can you just create rows with containers inside. You can dynamically size containers based on the number of containers retrieved per row.

JMo
  • 101
  • 5
  • Why not use Columns instead? – Qonvex620 Feb 20 '20 at 08:38
  • @Qonvex620 Because the first row has 2 columns, the second and third have 3 columns and the last one has 4 columns. Doesn't make sense using columns in a context where the number of columns varies according to the row. – Hugo Passos Feb 20 '20 at 16:36