main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(home: Scaffold(body: MyStatelessWidget()));
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      const Text("Unaltered"),
      createTable(),
      const Text("withNoBorderWidth"),
      createTable(withNoBorderWidth: true),
      const Text("withFill"),
      createTable(withFill: true),
      const Text("withNoBorderWidth & withFill"),
      createTable(withNoBorderWidth: true, withFill: true),
    ]);
  }

  Container createTable({bool withNoBorderWidth = false, bool withFill = false}) {
    var cellBackgroundColor = Colors.red.withAlpha(50),
        borderSide = BorderSide(width: withNoBorderWidth ? 0 : 5), // FIXME width of 0 eliminates some of the gap
        topRightBorder = BoxDecoration(border: Border(top: borderSide, right: borderSide), color: cellBackgroundColor),
        bottomRightBorder = BoxDecoration(border: Border(right: borderSide, bottom: borderSide), color: cellBackgroundColor),
        rightBorder = BoxDecoration(border: Border(right: borderSide), color: cellBackgroundColor),
        bottomBorder = BoxDecoration(border: Border(bottom: borderSide), color: cellBackgroundColor);

    var emptyCell = const MapEntry(BoxDecoration(), Text(""));

    var rows = [
      [MapEntry(topRightBorder, const Text("A")), emptyCell, emptyCell],
      [MapEntry(bottomRightBorder, const Text("B", style: TextStyle(fontSize: 30))), MapEntry(topRightBorder, const Text("E")), emptyCell],
      [emptyCell, MapEntry(rightBorder, const Text("")), MapEntry(bottomBorder, const Text("G"))],
      [emptyCell, MapEntry(bottomRightBorder, const Text("F")), emptyCell],
    ].map((r) => r.map((c) => Container(decoration: c.key, child: c.value) as Widget).toList()).toList();

    if (withFill) {
      // FIXME don't know in advance which cell will be the largest and can't apply to every cell
      rows[1][1] = TableCell(verticalAlignment: TableCellVerticalAlignment.fill, child: rows[1][1]);
    }
    return Container(
      margin: const EdgeInsets.all(20),
      child: Table(
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        children: rows.map((r) => TableRow(children: r)).toList(),
      ),
    );
  }
}