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 Table 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 Table widget takes a list of table row as a parameter (List<TableRow>). TableRow, in turn, can take a list of widgets as children.
- columnWidhts: This property determines the width of the columns in the Table 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 TableComumnWidth class as the input parameter to set the default width of the column in the Table widget.
- key: This property decides how widgets will replace one another in the widget tree.
- border: This property takes TableBorder widget as the parameter and it sets the border of the table. By default, there is no border in Table 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 Table 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:
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:
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:
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:
For the complete code, you can refer to https://github.com/singhteekam/Flutter-Data-Table-and-Table-Widget
Similar Reads
Flutter - TabView Widget There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 min read
Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 min read
Flutter - Stack Widget The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter - StreamBuilder Widget A StreamBuilder in Flutter is used to listen to a stream of data and rebuild its widget subtree whenever new data is emitted by the stream. It's commonly used for real-time updates, such as when working with streams of data from network requests, databases, or other asynchronous sources. In this art
5 min read