FlutterPub

12.9K Followers
·

Table in Flutter

All in one Flutter Resource: https://flatteredwithflutter.com/table-in-flutter/

Table in Flutter

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…..

Image for post
Image for post
Circle Avatar

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.
Image for post
Image for post
Table in Flutter

This widget takes in the below parameters :

  1. border : If you want to show the border.
  2. children : List of TableRows
Image for post
Image for post
Table Row

Inside the tableRow, is a TableCell.

Image for post
Image for post
Table Cell

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

Image for post
Image for post
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……

Articles related to Flutter:

For complete source code, visit

P.S…………………..

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.

Image for post
Image for post

Written by

Founder of Flatteredwithflutter.com | YouTuber | Writer at FlutterPub, FlutterCommunity | FlutterWeb web.flatteredwithflutter.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store