CODEWITHSUNDEEP
flutterdartstaggered-gridview
Karol Wiśniewski
Karol Wiśniewski

Reputation: 518

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

enter image description here

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?

Upvotes: 0

Views: 488

Answers (1)

pskink
pskink

Reputation: 24740

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)),
      ],
    );
  }

Upvotes: 1

Related Questions