Table in Flutter

Create Free Backend With Appwrite

Table in Flutter

Table widget is a great way to display data in a table layout within your mobile app. It’s useful when you need to present data in a structured format, such as financial reports, timetables, or settings.

Example 1: Student Record With Table

In this example below, you will learn to create a table to display student information such as name, subject, and grade.

Table(
  border: TableBorder.all(), // Adds a border to all cells
  columnWidths: <int, TableColumnWidth>{
    0: FixedColumnWidth(100.0), // fixed to 100.0 width
    1: FlexColumnWidth(), // automatically adapts to fill the table width
    2: FixedColumnWidth(100.0), // fixed to 100.0 width
  },
  children: [
    TableRow(children: [
      Text('Name'),
      Text('Subject'),
      Text('Grade'),
    ]),
    TableRow(children: [
      Text('Alice'),
      Text('Math'),
      Text('A'),
    ]),
    TableRow(children: [
      Text('Bob'),
      Text('Science'),
      Text('B+'),
    ]),
    // Add more students and grades here
  ],
)

Run Online

DataTable In Flutter

DataTable widget is a powerful widget that allows you to display tabular data with advanced features such as sorting, selection, and pagination. It is best for displaying complex tables with interactivity.

Example 2: Student Record With DataTable

In this example below, you will learn to create a DataTable to display student information such as name, subject, and grade.

DataTable(
  columns: const [
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Subject')),
    DataColumn(label: Text('Grade')),
  ],
  rows: const [
    DataRow(cells: [
      DataCell(Text('Alice')),
      DataCell(Text('Math')),
      DataCell(Text('A')),
    ]),
    DataRow(cells: [
      DataCell(Text('Bob')),
      DataCell(Text('Science')),
      DataCell(Text('B+')),
    ]),
    // Add more students and grades here
  ],
)

Run Online

Example 3: Contact List App

Now you will learn to create a contact list app using DataTable widget. You will define a model class called contact.dart to store contact information. Then you will build DataTable widget to display contact information.

Step 1: Define Model Class

In this step, you will define a model class called contact.dart. This class will be used to store contact information. You can define this class in lib/model/contact.dart file. Add the following code in contact.dart file.

class Contact {
  final String name;
  final String email;
  final String phone;

  Contact({this.name, this.email, this.phone});
}

Step 2: Create Contact List

In this step, you will create a list of contacts. You can define this list in lib/data/contact_data.dart file. Add the following code in contact_data.dart file.

import 'package:your_app_name/model/contact.dart';

List<Contact> contacts = [
  Contact(name: 'Alice', email: '[email protected]', phone: '1234567890'),
  Contact(name: 'Bob', email: '[email protected]', phone: '1234567890'),
  Contact(name: 'Charlie', email: '[email protected]', phone: '1234567890'),
  // Add more contacts here
];

Step 3: Display Contact List

In this step, you will display the contact list using DataTable widget. You can define this widget in lib/screens/contact_list.dart file. Add the following code in contact_list.dart file.

import 'package:flutter/material.dart';
import 'package:your_app_name/data/contact_data.dart';
import 'package:your_app_name/model/contact.dart';

class ContactList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contact List'),
      ),
      body: DataTable(
        columns: const [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Email')),
          DataColumn(label: Text('Phone')),
        ],
        rows: contacts.map((contact) {
          return DataRow(cells: [
            DataCell(Text(contact.name)),
            DataCell(Text(contact.email)),
            DataCell(Text(contact.phone)),
          ]);
        }).toList(),
      ),
    );
  }
}

Run Online

Challenge

Create a DataTable that displays a list of products with columns Name, Price, and Stock. The DataTable should have 5 rows of products with different names, prices, and stock values.