Flutter Table Widget Example
In this article, you will learn how to display table in flutter applications using flutter table widget. We will also customize flutter table widget using different properties through example.
Table widget is used to display data in table layout. If we have data in single row or column then listview is best option. But if we want to display data in multiple rows and columns then we should use table widget.
There are different properties in table widget. We can give border between rows and columns using border property. We can give same width to all columns using defaultColumnWidth property. We can also change width of individual column using columnWidths property.
If we want to show columns from left to right then we can change direction of columns using text direction property. We can also give vertical alignment to text inside cell using defaultVerticalAlignment property.
In this example, we are showing Ballon d’Or winners in football from 1997 to 2002 with country name and club name. So we are using four columns: Name, Year, Country Name and Club Name. We are displaying seven players so we are using seven plus one(header) total eight rows. Default table widget is displayed as below.
class TableScreen extends StatefulWidget {
@override
_TableScreenState createState() => _TableScreenState();
}
class _TableScreenState extends State<TableScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text(“Flutter Table Sample”),
),
body: Column(
children:<Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(“Ballon d’Or”,textScaleFactor: 2,style: TextStyle(fontWeight:FontWeight.bold),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Table(
children: [
TableRow(
children: [
Text(“Winners”),
Text(“Year”),
Text(“Country”),
Text(“Club Name”),
]
),
TableRow(
children: [
Text(“Ronaldo”),
Text(“1997”),
Text(“Brazil”),
Text(“Internazionale”),
]
),
TableRow(
children: [
Text(“Zinedine Zidane”),
Text(“1998”),
Text(“France”),
Text(“Juventus”),
]
),
TableRow(
children: [
Text(“Rivaldo”),
Text(“1999”),
Text(“Brazil”),
Text(“Barcelona”),
]
),
TableRow(
children: [
Text(“Luís Figo”),
Text(“2000”),
Text(“Portugal”),
Text(“Real Madrid”),
]
),
TableRow(
children: [
Text(“Michael Owen”),
Text(“2001”),
Text(“England”),
Text(“Liverpool”),
]
),
TableRow(
children: [
Text(“Ronaldo”),
Text(“2002”),
Text(“Brazil”),
Text(“Real Madrid”),
]
),
],
),
),
]
),
);
}
}
Text Scale Factor
children: [
TableRow(
children: [
Text(“Winners”,textScaleFactor: 1.5),
Text(“Year”,textScaleFactor: 1.5),
Text(“Country”,textScaleFactor: 1.5),
Text(“Club Name”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Ronaldo”,textScaleFactor: 1.5),
Text(“1997”,textScaleFactor: 1.5),
Text(“Brazil”,textScaleFactor: 1.5),
Text(“Internazionale”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Zinedine Zidane”,textScaleFactor: 1.5),
Text(“1998”,textScaleFactor: 1.5),
Text(“France”,textScaleFactor: 1.5),
Text(“Juventus”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Rivaldo”,textScaleFactor: 1.5),
Text(“1999”,textScaleFactor: 1.5),
Text(“Brazil”,textScaleFactor: 1.5),
Text(“Barcelona”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Luís Figo”,textScaleFactor: 1.5),
Text(“2000”,textScaleFactor: 1.5),
Text(“Portugal”,textScaleFactor: 1.5),
Text(“Real Madrid”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Michael Owen”,textScaleFactor: 1.5),
Text(“2001”,textScaleFactor: 1.5),
Text(“England”,textScaleFactor: 1.5),
Text(“Liverpool”,textScaleFactor: 1.5),
]
),
TableRow(
children: [
Text(“Ronaldo”,textScaleFactor: 1.5),
Text(“2002”,textScaleFactor: 1.5),
Text(“Brazil”,textScaleFactor: 1.5),
Text(“Real Madrid”,textScaleFactor: 1.5),
]
),
],
),
Flutter Table Border
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
),
Flutter Table Text Direction
textDirection: TextDirection.rtl,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
)
Flutter Table Vertical Alignment
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
TableRow(children: [
]),
]
),
Flutter Table Column Width
Default Column Width
defaultColumnWidth: FixedColumnWidth(100),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
TableRow(children: [
]),
]
),
Fixed Column Width
columnWidths: {
0: FixedColumnWidth(90),
1: FixedColumnWidth(65),
2: FixedColumnWidth(90),
3: FixedColumnWidth(145),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
),
Flutter Table Fraction Column Width
columnWidths: {
0: FractionColumnWidth(0.25),
1: FractionColumnWidth(0.15),
2: FractionColumnWidth(0.25),
3: FractionColumnWidth(0.35),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
),
Flutter Table Flex Column Width
columnWidths: {
0: FlexColumnWidth(5),
1: FlexColumnWidth(3),
2: FlexColumnWidth(5),
3: FlexColumnWidth(8),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
),
Flutter Table Intrinsic Column Width
columnWidths: {
0: IntrinsicColumnWidth(),
1: IntrinsicColumnWidth(),
2: IntrinsicColumnWidth(),
3: IntrinsicColumnWidth(),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.teal),
children: [
],
),
