slow_scroll.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      routes: {
        '/': buildHome,
        '/a': buildA,
        '/b': buildB,
      },
    ),
  );
}

Widget buildHome(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Column(
        children: [
          TextButton(
            onPressed: () => Navigator.of(context).pushNamed('/a'),
            child: const Text('Page A'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pushNamed('/b'),
            child: const Text('Page B'),
          )
        ],
      ),
    ),
  );
}

// TODO: Make this more realistic by making the child widgets do work like fetch
// JSON or protos and decode them.
Widget buildA(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Center(
        // I kind of started here. It was easy!
        child: Column(
          children: [
            // Look, it'll be lazy right?
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(), // Uh oh
              shrinkWrap: true, // This got rid of the exceptions!
              itemBuilder: (context, index) =>
                  ListTile(leading: CircleAvatar(child: Text('A$index'))),
              itemCount: 13,
            ),
            GridView.count(
              physics: const NeverScrollableScrollPhysics(), // uh oh..
              crossAxisCount: 4,
              mainAxisSpacing: 5.0,
              crossAxisSpacing: 5.0,
              shrinkWrap: true, // no more exceptions.
              children: const [
                CircleAvatar(child: Text('1')),
                CircleAvatar(child: Text('2')),
                CircleAvatar(child: Text('3')),
                CircleAvatar(child: Text('4')),
                CircleAvatar(child: Text('5')),
                CircleAvatar(child: Text('6')),
                CircleAvatar(child: Text('7')),
              ],
            ),
            // This should be fine until I need more...
            Column(
              children: const [
                ListTile(leading: CircleAvatar(child: Text('B1'))),
                ListTile(leading: CircleAvatar(child: Text('B2'))),
                ListTile(leading: CircleAvatar(child: Text('B3'))),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

Widget buildB(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: CustomScrollView(
      slivers: [
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (context, index) =>
                ListTile(leading: CircleAvatar(child: Text('A$index'))),
            childCount: 13,
          ),
          itemExtent: 52,
        ),
        SliverGrid.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 5.0,
          ),
          itemBuilder: (context, index) => CircleAvatar(child: Text('$index')),
          itemCount: 7,
        ),
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (context, index) =>
                ListTile(leading: CircleAvatar(child: Text('B$index'))),
            childCount: 3,
          ),
          itemExtent: 52,
        ),
      ],
    ),
  );
}