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

/// A simple data model for the 2x2 table content.
///
/// This class holds the matrix of strings that will be displayed in the table.
class TableData {
  final List<List<String>> data;

  /// Initializes the table data with a predefined 2x2 grid of strings.
  TableData()
      : data = const <List<String>>[
          <String>['Top-Left', 'Top-Right'],
          <String>['Bottom-Left', 'Bottom-Right'],
        ];
}

void main() {
  runApp(const SimpleTableApp());
  SemanticsBinding.instance.ensureSemantics();
}

/// The main application widget for displaying a 2x2 table.
class SimpleTableApp extends StatelessWidget {
  const SimpleTableApp({super.key});

  @override
  Widget build(BuildContext context) {
    final TableData tableData = TableData();

    return MaterialApp(
      title: 'Table Display',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('2x2 Table'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Table(
              // Defines borders for all cells for clear separation.
              border: TableBorder.all(color: Colors.grey, width: 1.0),
              children: tableData.data.map<TableRow>((List<String> row) {
                return TableRow(
                  children: row.map<Widget>((String cellText) {
                    return TableCell(
                      verticalAlignment: TableCellVerticalAlignment.middle,
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Text(
                          cellText,
                          textAlign: TextAlign.center,
                          style: const TextStyle(fontSize: 16.0),
                        ),
                      ),
                    );
                  }).toList(),
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}