How to Create table in flutter with dynamic content?

Question

I want to create a table with the data inside the table to be fetch from internet(API) As, we build ListView.builder is there any way to build table in flutter?

Answer 1

To create a table and insert data into it dynamically, you need a data model first. See the example below for more details.

data.dart (data model):

class NameOne{
    String sn, name, address, phone;
    
    NameOne({
        this.sn, 
        this.name, 
        this.address, 
        this.phone
    });
    //constructor

    factory NameOne.fromJSON(Map<String, dynamic> json){
        return NameOne( 
          sn: json["sn"],
          name: json["name"],
          address: json["address"],
          phone: json["phone"]
        );
    } 
}

main.dart

import 'package:flutter/material.dart';
import 'package:testapp/data.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    List<NameOne> namelist = []; //list of names, you can generate it using JSON as well
    namelist.add(NameOne(sn:"1", name:"Name 1", address:"Address 1", phone: "Phone 1"));
    namelist.add(NameOne(sn:"2", name:"Name 2", address:"Address 2", phone: "Phone 2"));
    namelist.add(NameOne(sn:"3", name:"Name 3", address:"Address 3", phone: "Phone 3"));
    //add more adata here
  
    return Scaffold(
        appBar: AppBar(
            title:Text("Dynamic Data Table"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body: Container(
            padding: EdgeInsets.all(15),
            child:Table( //if data is loaded then show table
            border: TableBorder.all(width:1, color:Colors.black45),
            children: namelist.map((nameone){ //display data dynamically from namelist List.
              return TableRow( //return table row in every loop
                      children: [
                        //table cells inside table row
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.sn)
                            )
                          ),
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.name)
                            )
                          ),
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.address)
                            )
                          ),
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.phone)
                            )
                          ),
                      ]
                );
            }).toList(),
          )
        )
    );
  }
}

Output:

This is the way you can insert data to Flutter table dynamically,visit How to Make Table and Insert data from PHP MySQL JSON Dynamically in Flutter App to see more details to create table from JSON data fetched with REST API.