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
This widget takes in various parameters,
backgroundImage : Any image provider, in this case (Network Image)
maxRadius : Maximum size of the circle avatar.
backgroundColor : In case you want to show a color (background)
child : Useful to show loading until the image is displayed.
Now, comes Table widget…….
Table in Flutter
This widget takes in the below parameters :
border : If you want to show the border.
children : List of TableRows
TableRows : It represents the one complete row in the table…
TableCell in Flutter
Inside the tableRow, is a TableCell.
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.
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.
