Is this possible to achieve this specific staggered gridview in flutter?

Question

This is view that I want to achieve with dynamic number of items. I am using package https://pub.dev/packages/flutter_staggered_grid_view.

I want first item to take full width, then I want others to layout next items as in MasonryGridView

I tried to do it with MasonryGridView but as documentation said tile Must occupy 1 column only.

Other grid layouts like StaggeredGridView can do this but in this case I don't see availability to put items using index like in ListView. Maybe am I missing something here and this is good solution for my case?

Other grid layouts, for example QuiltedGrid have possibility to use it with index, but they have pattern property, which make it my 0 index which taking whole width to repeat, this is not what I want

Is there any solution to achieve what I want?

Answer 1

with SliverMasonryGrid sliver it is as simple as this:

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(child: Container(height: 100, color: Colors.red)),
        SliverMasonryGrid.count(crossAxisCount: 2, childCount: 20, itemBuilder: (ctx, i) => Padding(
          padding: const EdgeInsets.all(4),
          child: Container(height: i.isOdd? 50 : 80, color: i.isOdd? Colors.green : Colors.blue, child: Center(child: Text('item $i'))),
        )),
        SliverToBoxAdapter(child: Container(height: 100, color: Colors.orange)),
      ],
    );
  }