How to create cells with different sizes using GridView in Flutter?

Question

I want to create a similar view with Flutter as we can do it by creating a UICollectionViewLayout in iOS .

This is a sample code I am using. https://github.com/flutter/flutter/blob/b8a2456737c9645e5f3d7210fba6267f7408486f/dev/integration_tests/flutter_gallery/lib/demo/material/grid_list_demo.dart

How to achieve this using GridView in Flutter. If not GridView, is there any other way to do it?

Answer 1

GridView is not designed to do this. You may be able to get a Wrap to do what you want, although from your example it may not quite do it (horizontally it definitely wont as it arrange the items into rows; vertically it might work for you or might not depending on exactly what you're doing).

If you're only ever going to have the two columns, you could simply have a Row containing two Columns and make sure to put the items in the right columns.

Or the more complicated but probably best answer would be to write the logic for arranging the items this way yourself - see CustomMultiChildLayout.

EDIT: there is also a package that may work for you. It can't do arbitrary sizing, and you need to know the sizes of the items in advance, but you can specify items to take up multiple rows or columns of the grid. See it here.

Note that if you have a lot of items, you'll probably want to do something with a CustomScrollView but that isn't really in the scope of this answer.

Answer 2

https://github.com/letsar/flutter_staggered_grid_view This would help you. I think the plugin gives different size.