Table Widget in Flutter

Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach.

Constructor of Table class:

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

Properties of Table widget:

  • children: It defines the table rows.
  • textDirection: It defines the direction in which columns are ordered in table.
  • border: it sets the border of the table. By default, there is no border.
  • defaultVerticalAlignment: It sets the alignment of cells vertically in the table.

Example: The main.dart file.

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
                ]
              ),
            ],
        ),
          ),
        ]
      ),
    );
  }
}

chevron_right


Output:

table widget without border



If we make the below changes to the above example:

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

The resultant will be as depicted below:

table widget with border

If we make the below changes to the above example:

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

The resultant will be as depicted below:

If we make the below changes to the above example:

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

The resultant will be as depicted below:

table widget with colored borders

If we make the below changes to the above example:

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

The resultant will be as depicted below:

table widget with vertical cell alignment and coloured border

For the complete code, you can refer to https://github.com/singhteekam/Flutter-Data-Table-and-Table-Widget




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.