Flutter: Data in Table Format — FutureBuilder, JSON, DataTable

While working with APIs and JSON data in a flutter, sometimes we want to present the data coming from APIs in a tabular format.

Introduction
We are going to fetch data from APIs and then show it in a very clean way using tables in a flutter. We often get data that we have to show in a very organised way, and a table is one of the best ways to show large data. So, we are going to use DataTable, a widget provided by flutter.

So what is DataTable?

Data Table is a widget provided by flutter. It is used when we have lots of data which we have to process in rows and columns. It is one of the very useful widgets for presenting data in an organised way.

Let's begin -

So what we are going to do is show the data of an API in table format. The API we are going to use is Covid API and we only going to show three things Country name, Confirmed cases and Total death.

After creating a new project, the first thing is to get started with the HTTP package already installed in pubspec.yaml for calling API and then creating a basic structure. We are going to get data from API so we will use FutureBuilder. And now we work on the API and modal class part.

DataClass is implemented in the last section.

Next, we are going to call API using the HTTP package and parse its response according to our modal class.

Below is the code for the Modal class we created.

So now the real thing started. Now we are going to create DataClass for getting snapshot data from the future builder and show it in table format.

And here is our desired output.

Complete Code:-
https://github.com/AyushTripathi28/FutureDataTableFormat

For more about Flutter, follow Me so you’ll get notified when I write new posts. Also, Have any questions then reach out to me at my LinkedIn: ayushtripathi445
Thanks For Your Time :)