Search⌘ K
AI Features
Home
Courses
Responsive and Adaptive UI in Flutter

The Table Widget

Explore how to implement the Table widget in Flutter to create responsive and adaptive user interfaces. Understand how to dynamically populate table cells, adjust column widths using the columnWidth property, and constrain table sizes for optimal display across devices. This lesson helps you build consistent tabular layouts that adapt smoothly to different screen sizes without fixed sizing pitfalls.

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 ...