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.

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)

‘

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.

Conclusion

To conclude, hope you now have a clear practical knowledge of how to easily use and customize Flutter table widget. Thank you for reading this post.