Table widget and Attributes

The Table widget in Flutter is used to create a grid of cells, similar to an HTML table. It allows you to arrange widgets in rows and columns, providing more control over the layout compared to other widgets like Row and Column.

Attributes:

1. children (List<TableRow>):

   • The list of TableRow widgets that represent the rows in the table. Each TableRow contains a list of widgets representing the cells in that row.

2. defaultColumnWidth (TableColumnWidth):

   • The default width of columns in the table. This attribute allows you to set a fixed width for all columns in the table.

3. defaultVerticalAlignment (TableCellVerticalAlignment):

   • The default vertical alignment for cells in the table. This attribute allows you to specify how cells should be aligned vertically within their respective rows.

4. border (TableBorder):

   • The border decoration for the table. This attribute allows you to customize the appearance of the table's border, including the color, width, and style.

Example:

import 'package:flutter/material.dart';

class TableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Widget Example'),
      ),
      body: Center(
        child: Table(
          border: TableBorder.all(),
          defaultColumnWidth: FixedColumnWidth(100),
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          children: [
            TableRow(
              children: [
                TableCell(child: _buildCell('Name', Colors.blue)),
                TableCell(child: _buildCell('Age', Colors.blue)),
                TableCell(child: _buildCell('Gender', Colors.blue)),
              ],
            ),
            TableRow(
              children: [
                TableCell(child: _buildCellWithColor('Vinit', 'Vinit', Colors.green)),
                TableCell(child: _buildCellWithColor('22', '22', Colors.green)),
                TableCell(child: _buildCellWithColor('Male', 'Male', Colors.green)),
              ],
            ),
            TableRow(
              children: [
                TableCell(child: _buildCellWithColor('Jay', 'Jay', Colors.orange)),
                TableCell(child: _buildCellWithColor('10', '10', Colors.orange)),
                TableCell(child: _buildCellWithColor('Male', 'Male', Colors.orange)),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCell(String text, Color color) {
    return Container(
      color: color,
      padding: EdgeInsets.all(8.0),
      child: Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.white), // Optional: Set text color
        ),
      ),
    );
  }

  Widget _buildCellWithColor(String fullText, String targetText, Color color) {
    List<TextSpan> children = [];

    // Split full text into parts based on target text
    int startIndex = 0;
    while (fullText.indexOf(targetText, startIndex) != -1) {
      int index = fullText.indexOf(targetText, startIndex);
      if (index > startIndex) {
        children.add(
          TextSpan(
            text: fullText.substring(startIndex, index),
            style: TextStyle(color: Colors.black), // Style for non-target text
          ),
        );
      }
      children.add(
        TextSpan(
          text: targetText,
          style: TextStyle(color: color), // Style for target text
        ),
      );
      startIndex = index + targetText.length;
    }
    // Add remaining text
    if (startIndex < fullText.length) {
      children.add(
        TextSpan(
          text: fullText.substring(startIndex),
          style: TextStyle(color: Colors.black), // Style for non-target text
        ),
      );
    }

    return Container(
      padding: EdgeInsets.all(8.0),
      child: Center(
        child: RichText(
          text: TextSpan(children: children),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: TableExample(),
  ));
}

Explanation:

• In this example, a Table widget is used to create a grid of cells representing tabular data.

• The border attribute is set to TableBorder.all() to display borders around all cells in the table.

• The defaultColumnWidth attribute is set to FixedColumnWidth(100) to specify a fixed width of 100 pixels for all columns in the table.

• The defaultVerticalAlignment attribute is set to TableCellVerticalAlignment.middle to align cells vertically at the middle within their respective rows.

• The children attribute contains a list of TableRow widgets, each representing a row in the table. Each TableRow contains a list of TableCell widgets representing the cells in that row.

• Inside each TableCell, a Center widget is used to center-align the text widget representing the data in each cell.

  • When you run this code, you'll see a table with three columns and color on table and text (Name, Age, Gender) and two rows of data (Vinit, 22, Male and Jay, 10, Male) displayed in the center of the screen.