Flutter scroll demo

no-sync-scroll-demo.dart

// DartPad live demo at https://dartpad.dev/?id=1497bd3ba6ef7e9c25f7434cefd488ae

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          }),
          child: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final List<String> colEntries = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
  final List<String> rowEntries =
      Iterable<int>.generate(15).map((e) => e.toString()).toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('no sync scroll demo'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: 75,
                    height: 75,
                    color: Colors.grey[200],
                  ),
                  const SizedBox(width: 10),
                  Container(
                    height: 75,
                    width: 400,
                    color: Colors.blue[100],
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: HeaderContainer(rowEntries: rowEntries),
                    ),
                  )
                ],
              ),
              const SizedBox(height: 10),
              Row(
                children: <Widget>[
                  Container(
                    width: 75,
                    height: 400,
                    color: Colors.blue[100],
                    child: SingleChildScrollView(
                      child: ColumnContainer(
                        colEntries: colEntries,
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  SizedBox(
                    width: 400,
                    height: 400,
                    child: SingleChildScrollView(
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: BodyContainer(
                          rowEntries: rowEntries,
                          colEntries: colEntries,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ColumnContainer extends StatelessWidget {
  final List<String> colEntries;
  const ColumnContainer({
    Key? key,
    required this.colEntries,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int numberOfRows = colEntries.length;
    return Column(
      children: List.generate(
        numberOfRows,
        (i) {
          return Container(
            height: 75,
            width: 75,            
            decoration: BoxDecoration(border: Border.all(color: Colors.white)),
            child: Center(child: Text(colEntries[i])),
          );
        },
      ),
    );
  }
}

class HeaderContainer extends StatelessWidget {
  final List<String> rowEntries;
  const HeaderContainer({
    Key? key,
    required this.rowEntries,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int numberOfColumns = rowEntries.length;
    return Row(
      children: List.generate(
        numberOfColumns,
        (i) {
          return Container(
            height: 75,
            width: 75,
            decoration: BoxDecoration(border: Border.all(color: Colors.white)),
            child: Center(child: Text(rowEntries[i])),
          );
        },
      ),
    );
  }
}

class BodyContainer extends StatelessWidget {
  final List<String> colEntries;
  final List<String> rowEntries;
  const BodyContainer({
    Key? key,
    required this.colEntries,
    required this.rowEntries,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int numberOfColumns = rowEntries.length;
    int numberOfLines = colEntries.length;
    return Column(
      children: List.generate(numberOfLines, (y) {
        return Row(
          children: List.generate(numberOfColumns, (x) {
            return TableCell(item: "${colEntries[y]}${rowEntries[x]}");
          }),
        );
      }),
    );
  }
}

class TableCell extends StatelessWidget {
  final String item;
  const TableCell({
    Key? key,
    required this.item,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 75,
      width: 75,
      decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      child: Center(child: Text(item)),
    );
  }
}