Flutter Sectioned GridView - Header/Category/Group

Question

https://gist.github.com/gabrielemariotti/e81e126227f8a4bb339c

Android has SimpleSectionedListAdapter for RecyclerView.

This is achievable in Flutter using Nested ListView and GridView or CustomScrollView.

The problem is that, the first solution is not as performant as the latter one and the latter one is buggy right now: https://github.com/flutter/flutter/issues/16125

So is there another approach which favors performance?

---

Mallory

I am looking to implement the same layout. Did you manage to implement that in Flutter? – Zygotene

Also need this. – Isadora

Answer 1

One way you can approach this is by using flutter_staggered_grid_view plugin to manage dynamic GridView items.

Here's a sample that you can try out.

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int cursor = 1;
    int sectionCursor = 1;
    return StaggeredGridView.countBuilder(
      crossAxisCount: 4,
      itemCount: null,
      itemBuilder: (BuildContext context, int index) => Container(
          color: (index % 9 == 0) ? Colors.lightBlueAccent : Colors.white,
          child: Center(
            child: (index % 9 == 0) ? Text('Section ${sectionCursor++}') : Text('Sub item ${cursor++}'),
          )),
      staggeredTileBuilder: (int index) =>
          StaggeredTile.count((index % 9 == 0) ? 4 : 1, 1),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
    );
  }
}

Demo

Moonraker