Widget de tabla en Flutter

El widget de tabla se utiliza para mostrar elementos en un diseño de tabla. No es necesario utilizar filas y columnas para crear una tabla. Si tenemos varias filas con el mismo ancho de columnas, el widget de tabla es el enfoque correcto. SliverList o Column serán los más adecuados si solo queremos tener una sola columna. La altura de las filas en el widget Tabla depende del contenido dentro de ellas. Pero el ancho de la columna se puede cambiar especificando la propiedad columnWidths .

Constructor de la clase Table:

Syntax:
Table({Key key, 
List<TableRow> children, 
Map<int, TableColumnWidth> columnWidths, 
TableColumnWidth defaultColumnWidth, 
TextDirection textDirection, 
TableBorder border, 
TableCellVerticalAlignment defaultVerticalAlignment, 
TextBaseline textBaseline})

Propiedades del widget de tabla:

• children: Esta propiedad del widget Table toma una lista de filas de tablas como parámetro ( List<TableRow>). TableRow , a su vez, puede tomar una lista de widgets como elementos secundarios.
• columnWidhts: esta propiedad determina el ancho de las columnas en el widget de tabla .
• textDirection: Define la dirección en la que se ordenan las columnas en la Tabla . Puede ser de izquierda a derecha o de derecha a izquierda.
• defaultColumnWidth: esta propiedad toma la clase TableComumnWidth como parámetro de entrada para establecer el ancho predeterminado de la columna en el widget de tabla .
• clave: esta propiedad decide cómo se reemplazarán los widgets entre sí en el árbol de widgets.
• borde: esta propiedad toma el widget TableBorder como parámetro y establece el borde de la tabla. De forma predeterminada, no hay borde en el widget Tabla .
• defaultVerticalAlignment: esta propiedad toma la enumeración TableCellVerticalAlignment como el valor del parámetro para establecer la alineación de las celdas verticalmente en la tabla.
• textBaseline: esta propiedad toma la enumeración TextBaseline como parámetro. Usando esta propiedad, podemos especificar una línea horizontal para alinear el texto en la pantalla dentro del widget Tabla .

Ejemplo: El archivo main.dart .

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Table',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children:<Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Table",textScaleFactor: 2,style: TextStyle(fontWeight:FontWeight.bold),),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Table(
               
            // textDirection: TextDirection.rtl,
            // defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
            // border:TableBorder.all(width: 2.0,color: Colors.red),
            children: [
              TableRow(
                children: [
                  Text("Education",textScaleFactor: 1.5,),
                  Text("Institution name",textScaleFactor: 1.5),
                  Text("University",textScaleFactor: 1.5),
                ]
              ),
               TableRow(
                children: [
                  Text("B.Tech",textScaleFactor: 1.5),
                  Text("ABESEC",textScaleFactor: 1.5),
                  Text("AKTU",textScaleFactor: 1.5),
                ]
              ),
              TableRow(
                children: [
                  Text("12th",textScaleFactor: 1.5),
                  Text("Delhi Public School",textScaleFactor: 1.5),
                  Text("CBSE",textScaleFactor: 1.5),
                ]
              ),
              TableRow(
                children: [
                  Text("High School",textScaleFactor: 1.5),
                  Text("SFS",textScaleFactor: 1.5),
                  Text("ICSE",textScaleFactor: 1.5),
                ]
              ),
            ],
        ),
          ),
        ]
      ),
    );
  }
}

Producción:

Si hacemos los siguientes cambios en el ejemplo anterior:

textDirection: TextDirection.ltr,
border:TableBorder.all(width: 1.0,color: Colors.red)

La resultante será como se muestra a continuación:

Si hacemos los siguientes cambios en el ejemplo anterior:

textDirection: TextDirection.ltr,
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
border:TableBorder.all(width: 1.0,color: Colors.red),

La resultante será como se muestra a continuación:

Si hacemos los siguientes cambios en el ejemplo anterior:

textDirection: TextDirection.rtl,
border:TableBorder.all(width: 1.0,color: Colors.red),

La resultante será como se muestra a continuación:

Si hacemos los siguientes cambios en el ejemplo anterior:

textDirection: TextDirection.ltr,
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border:TableBorder.all(width: 1.5,color: Colors.red),

La resultante será como se muestra a continuación:

Para obtener el código completo, puede consultar https://github.com/singhteekam/Flutter-Data-Table-and-Table-Widget