Playing with dynamic grid layout

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Different edge cases are in use or commented out, toggle comments to try
  // out different ones.

  // Edge case: initial scroll offset
  final ScrollController scrollController = ScrollController(initialScrollOffset: 200);
  
  // Edge case: Removing children from the list on the fly
  // Add another button for adding children as well
  final List<Widget> children = List.generate(100, (index) => Container(
    color: index.isEven ? Colors.redAccent[100] : Colors.tealAccent[100],
     child: Center(child: Text('Item $index')),
  ));
  // Edge case: change the cross axsis extent on the fly
  double extent = 150;
  // Edge case: change the cross axis count on the fly
  int count = 3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            count += 1;
            // extent += 100;
            // children.removeAt(3);
          });
        },
      ),
      body: GridView.builder(
        // controller: scrollController,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: count,
        // gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //   maxCrossAxisExtent: extent,
          // This is just to force the regular tile layout we already have to
          // use the dynamic layout algorithm. Even though the regulay tile
          // layout can be predetermined, this halped me validate the algoithm
          // in RenderDynamicSliverGrid worked because it does not use the
          // predetermined layout methods. Commenting this out will use a fixed
          // layout path and the original layout algorithm.
          layoutType: SliverGridLayoutType.dynamic,
        ),
        itemCount: children.length,
        itemBuilder: (context, index) {
          // Should see print statements that validate it is building lazily.
          print('build, $index');
          return children[index];
          // return Container(
          //   color: index.isEven ? Colors.redAccent[100] : Colors.tealAccent[100],
          //   child: Center(child: Text('Item $index'))
          // );
        },
      )
    );
  }
}