Responsive and Adaptive UI in Flutter/

...

/

The Table Widget

The Table Widget

Learn to show data in a table on both small and large screens.

We'll cover the following...

If the application layout consists of a Column of Row widgets with the same number of children, we might get a more consistent UI if we use a Table widget instead. The Table widget is handy if we need to display data in a tabular format. If we want to display data about the employees of a company, we can use Table as seen in the following example:

import 'package:flutter/material.dart';

import 'employee_cell.dart';
import 'employee.dart';

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

  @override
  Widget build(BuildContext context) {
    return Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: <TableRow>[
        TableRow(
          decoration: BoxDecoration(
            color: Colors.green[200],
          ),
          children: const <Widget>[
            EmployeeCell(title: 'Name', isHeader: true),
            EmployeeCell(title: 'Role', isHeader: true),
            EmployeeCell(title: 'Hourly rate', isHeader: true),
          ],
        ),
        ...Employee.getEmployees().map((employee) {
          return TableRow(children: [
            EmployeeCell(title: employee.name),
            EmployeeCell(title: employee.role),
            EmployeeCell(title: '\$ ${employee.hourlyRate}'),
          ]);
        }),
      ],
    );
  }
}
A Table widget containing employee data

In employee.dart, we define a class representing an employee with a static method that returns a list of hard-coded employees in line 8. An employee is characterized by a name, a role, and the hourly rate from lines 2 to 4. In employee_cell.dart, we define ...