Flutter

Table in Flutter

aseemwangoo No Comments

Innovation starts from tables…

The Flutter mobile framework is a collection of resourceful widgets. In my quest, I came across one of the widely anticipated and used widgets in the web development, i.e TABLES…….

Flutter has included the Table widget along with several useful widgets.

In this article, we will be exploring Table Widget and another important widget…(Stay tuned)

Let’s Begin….

In the application, we have a Column widget which comprises of a Table and CircleAvatar…..

Circle Avatar in Flutter

Circle Avatar in Flutter

 

This widget takes in various parameters,

  1. backgroundImage : Any image provider, in this case (Network Image)
  2. maxRadius : Maximum size of the circle avatar.
  3. backgroundColor : In case you want to show a color (background)
  4. child : Useful to show loading until the image is displayed.

Now, comes Table widget…….

Table in Flutter

Table in Flutter

This widget takes in the below parameters :

  1. border : If you want to show the border.
  2. children : List of TableRows

TableRows : It represents the one complete row in the table…

Table in Flutter

TableCell  in Flutter

Inside the tableRow, is a TableCell.

Table in Flutter

Table Row in Flutter

Table Cell : It comprises of a child widget. In our case, we have included a Row widget for showing the data.

Table in Flutter

Application

We are getting the data from sample apis available online. Parsing the data and then binding to the table widget.

The number of Table Rows can be calculated as per the size of the data and then rendered accordingly……

Tips :

If you only have one row, the Row widget is more appropriate. If you only have one column, the SliverList or Column widgets will be more appropriate.

Rows size vertically based on their contents. To control the column widths, use the columnWidths property.

For more details about the table layout algorithm, see RenderTable. To control the alignment of children, see TableCell.

Video demonstration :

For complete source code, please visit

https://github.com/AseemWangoo/flutter_programs/blob/master/Table.dart

P.S……………..