In this Flutter post, we will learn how to use and customize Flutter table widget. We will be understanding it step by step using a proper Flutter example to better understand how Flutter table widget works.
I am sure that after reading this post, you will be able to easily incorporate Flutter table widget in your own Flutter apps. So, let’s just get right into it.
What is Flutter Table Widget?
Flutter table widget as the names suggests, it is used to create tables in Flutter apps. These tables can hold dynamic values. We will specify custom values in Flutter table widget. Let’s start implementing Flutter table widget practically.
Implementing Flutter Table Widget (Easy Example)
In order to implement Flutter table widget, we have to use the table class. See below:
Table()
Let’s now see how to customize this table.
Flutter Table Widget Customization
Let’s start discussing its constructors.
Children Constructor
It is used to add entries in the table. It takes a list of table row widget. See below code:
Table(
children: [
TableRow(children: [ Text('Name'), Text('Age'), Text('Gender'), Text('Location'),
])
],
)
You can see that we now have a list of entries. The reason is that we have entered a list of Flutter text widgets to the children constructor of table row class.
Let’s now use multiple table row to see what output it shows. See below code:
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Table( children: [
TableRow(children: [ Text('Name'), Text('Age'), Text('Gender'),Text('Country'),]),
TableRow(children: [ Text('Zeeshan Ai'), Text('24'), Text('Male'),Text('Pakistan')]),
TableRow(children: [ Text('Yasir'), Text('25'), Text('Male'),Text('Pakistan'),])
],
))
You can see a list of entries and we also have use the Flutter padding to distance the table from the screen borders. You can easily style the first table row, make it bold or its size bigger using the text style of Flutter text widget. Same can be done for other table rows as well.
Border Constructor
Using the border constructor, we can style the border of Flutter table widget. See below code:
border: TableBorder.all( color: Colors.grey, borderRadius: BorderRadius.circular(5), style: BorderStyle.solid, width: 1)
You can see that there is not space between the border and the text. We can give the text widgets of table row some padding to create a space between text and borders. See below code:
TableRow(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Name'),
),
//use same process for other entries
]),
Column Width Constructor
It is used to specify the width of columns in Flutter table widget. It takes a map. The key should be integer and value should be of fraction column width. See below code:
columnWidths: {
0: FractionColumnWidth(.44),
1: FractionColumnWidth(.2),
2: FractionColumnWidth(.2),
3: FractionColumnWidth(.2)
}
You can see that the width of first column is more than other columns.
Table Row Customization
In order to customize any table row, use the decoration constructor of table row widget and pass it box decoration class.
Color Constructor
To give a background color to the table row, use the color constructor of box decoration class. See below code:
TableRow( decoration: BoxDecoration(color: Colors.blue.shade100), children: [ //use the entries mentioned above ])
Border Constructor
Let’s now give some other border color to this table row. For that, we have to use the border constructor of the box decoration class. See below code:
border: Border.all(color: Colors.blue, width: 2)
‘
Its preferred to use only one border. Means either use the border of table row as seen above or use the border of the whole table. If you want to give different borders to each table row then use the above method.
You can use the Border() class to specify each border side with a different value.
So this is how you can easily customize Flutter table widget in your own Flutter apps as well. I have a task for you, I would like you to customize the remaining constructor of the Flutter table widget and share your experience here.
Below is the complete source code of the customized Flutter Table Widget.
Flutter Table Widget Customization Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Table(
children: [
TableRow(
decoration: BoxDecoration(
color: Colors.blue.shade100,
border: Border.all(color: Colors.blue, width: 2)),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Name'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Age'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Gender'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Country'),
),
]),
TableRow(
decoration: BoxDecoration(
color: Colors.blue.shade50,
border: Border.all(color: Colors.blue, width: .5)),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Zeeshan Ai'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('24'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Male'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Pakistan'),
)
]),
TableRow(
decoration: BoxDecoration(
color: Colors.blue.shade50,
border: Border.all(color: Colors.blue, width: .5)),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Yasir'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('25'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Male'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Pakistan'),
),
])
],
),
))));
}
}Conclusion
To conclude, hope you now have a clear practical knowledge of how to easily use and customize Flutter table widget. I would be happy to have your feedback on this post. Thank you for reading this post.
