Table example using Colums and Rows

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'dart:math' as math;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Grid Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  final TableData data = TableData.raw([
    [
      "Cell 1/1",
      "Cell 2/1 Something really long dong dong mong schmong Something really long dong dong mong schmong Something really long dong dong mong schmong Something really long dong dong mong schmong",
      "Cell 3/1",
      "Cell 4/1",
      "Cell 5/1"
    ],
    ["Cell 1/2", "Cell 2/2", "Cell 3/2", "Cell 4/2", "Cell 5/2"],
    ["Cell 1/3", "Cell 2/3", "Cell 3/3", "Cell 4/3", "Cell 5/3"],
  ], [
    1,
    2,
    1,
    1,
    3
  ]);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    print(size);
    final minWidth = data.minWidth;
    print(minWidth);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.black54,
                style: BorderStyle.solid,
                width: 1.0,
              ),
            ),
            child: Column(
              children: data.rows.map((row) {
                return TableRow(
                    row: row, maxWidth: math.max(size.width, minWidth));
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

class TableRow extends StatelessWidget {
  TableRow({@required this.row, @required this.maxWidth});

  final RowData row;
  final double maxWidth;

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxWidth: maxWidth),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black54,
            style: BorderStyle.solid,
            width: 1.0,
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: row.cells.map((cell) {
            return TableCell(cell: cell);
          }).toList(),
        ),
      ),
    );
  }
}

class TableCell extends StatelessWidget {
  TableCell({
    @required this.cell,
  });

  final CellData cell;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: cell.flex,
      child: ConstrainedBox(
        constraints: BoxConstraints(minWidth: cell.minWidth),
        child: Container(
//          height: cell.height,
          color: cell.color,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(cell.data),
          ),
        ),
      ),
    );
  }
}

class TableData {
  TableData({this.rows});

  factory TableData.raw(List<List<String>> data, List<int> columnFlex) {
    final colors = [
      Colors.lightBlue,
      Colors.amber,
      Colors.green,
      Colors.indigo,
      Colors.deepOrange,
      Colors.lightGreen
    ];
    final shades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    return TableData(
        rows: data.map((rowData) {
      return RowData(
          cells: rowData.map((cellData) {
        return CellData(
          data: cellData,
          flex: columnFlex[rowData.indexOf(cellData)],
          height: 50,
          materialColor: colors[data.indexOf(rowData) % colors.length],
          shade: shades[rowData.indexOf(cellData) % shades.length],
        );
      }).toList());
    }).toList());
  }

  final List<RowData> rows;

  double get minWidth {
    final minWidths = rows.map((e) => e.minWidth).toList();
    return minWidths.reduce(math.max);
  }
}

class RowData {
  RowData({this.cells});

  final List<CellData> cells;

  double get minWidth {
    return cells.fold(0, (previousVal, cell) => previousVal + cell.minWidth);
  }
}

class CellData {
  CellData({this.materialColor, this.shade, this.flex, this.height, this.data});

  final MaterialColor materialColor;
  final int shade;
  final int flex;
  final double height;
  final String data;

  double get minWidth {
    return flex * 80.0;
  }

  Color get color {
    return materialColor[shade];
  }
}