Flutter Sectioned GridView - Header/Category/Group - performance

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?

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