Skip to content
Related Articles

Related Articles

Table Widget in Flutter
  • Difficulty Level : Expert
  • Last Updated : 13 Nov, 2020

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. SliverList or Column will be most suitable if we only want to have a single column. The height of rows in the Tabel widget is dependent on the content inside them. But the width of the column can be changed by specifying columnWidths property.

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: This property of Tabel widget takes a list of table row as a parameter (List<TabelRow>). TabelRow, in turn, can take a list of widgets as children.
  • columnWidhts: This property determines the width of the columns in the Tabel widget.
  • textDirection: It defines the direction in which columns are ordered in Table. It can be either from left-to-right or from right-to-left.
  • defaultColumnWidth: This property takes in TabelComumnWidth class as the input parameter to set the default width of the column in the Tabel widget.
  • key: This property decides how widgets will replace one another in the widget tree.
  • border: This property takes TabelBorder widget as the parameter and it sets the border of the table. By default, there is no border in Tabel widget.
  • defaultVerticalAlignment: This property takes TableCellVerticalAlignment enum as the parameter value to sets the alignment of cells vertically in the table.
  • textBaseline: This property takes TextBaseline enum as the parameter. Using this property we can specify a horizontal line uses to align text on the screen inside the Tabel widget.

Example: The main.dart file.

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

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
Recommended Articles
Page :