How To Easily Customize Flutter Table Widget

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.

Outline

What is Flutter Table Widget?
Implementing Flutter Table Widget (Easy Example)
Flutter Table Widget Customization
Children Constructor
Border Constructor
Column Width Constructor
Table Row Customization
Color Constructor
Border Constructor
Flutter Table Widget Customization Source Code
Conclusion

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.

I would also love to see you visit my other articles. These are related to Flutter app development, custom Flutter templates, custom animations in Flutter, Flutter widgets, Flutter web, Flutter books and many more.

Related posts links to these topics are listed below. Menu navigation bar or the search field of this site can be used to find other informative posts. Thank you for reading this post.

Flutter app articles you might: Flutter appbar actions, beautiful gradient login UI, Flutter development, Flutter sliverappbar , widgets in flutter, Flutter architecture, Flutter bottom navigation bar, Flutter appbar title center.