How to print a api response key and value both print in a DataTable in flutter?(Want to print Key in DataColumn and Value in DataRow)

Question

=> I want to print "Title" and "Value" in DataColumn

=> and there value want to print in DataRow

I want to print "key" as well as their "value" both in DataTable. First of all print "keys" in DataColumn and print "Values" in DataRow. This is Api Link that i used for calling "https://run.mocky.io/v3/23d7180b-7fba-4f31-a968-187f62ad68d9"

import 'dart:convert';
import "package:flutter/material.dart";
import 'package:http/http.dart' as http;

class HorizontalTable extends StatefulWidget {
  HorizontalTable({Key key}) : super(key: key);

  @override
  State<HorizontalTable> createState() => _HorizontalTableState();
}

class _HorizontalTableState extends State<HorizontalTable> {
  List<dynamic> ColumnsList = [];
  List<dynamic> rowsList = [];
  var decode;

  @override
  void initState() {
    fetchStopEventData();
    decode[0].forEach((key, value) {
      print(key);
      ColumnsList.add(
        <DataColumn>[
          DataColumn(label: Text('${key}')),
        ],
      );
    });
    decode.forEach((dataRow) {
      Map<String, DataCell> DataCellMap = {};
      dataRow.forEach((key, value) {
        print("$key : $value");
        DataCellMap.addAll({key.toString(): DataCell(value)});
      });
      print("-------------------------------");
      rowsList.add(<DataRow>[DataRow(cells: DataCellMap.values)]);
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: DataTable(
          headingTextStyle: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 12,
              color: Colors.grey.shade600),
          dataTextStyle: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 12,
              color: Colors.grey.shade600),
          headingRowHeight: 25,
          dataRowHeight: 25,
          headingRowColor: MaterialStateColor.resolveWith(
            (states) {
              return Colors.grey.shade100;
            },
          ),
          dividerThickness: 1.0,
          columnSpacing: 0.0,
          horizontalMargin: 5.0,
          showBottomBorder: false,
          decoration: BoxDecoration(
              border: Border.all(
            width: 0.5,
            color: Colors.grey.shade500,
          )),
         
          columns: ColumnsList,
          rows: rowsList,
         
        ),
      ),
    );
  }

 
  fetchStopEventData() async {
    try {
      final response = await http.get(
        Uri.parse(
            'https://run.mocky.io/v3/23d7180b-7fba-4f31-a968-187f62ad68d9'),
      );
      if (response.statusCode == 200) {
        decode = jsonDecode(response.body.toString());

        decode[0].forEach((key, value) {
          print(key);
          ColumnsList.add(key);
        });
        decode.forEach((dataRow) {
          dataRow.forEach((key, value) {
            print("Data Table: $key : $value");
          });
          print("-------------------------------");
        });
      } else {
        throw Exception('Failed to load data');
      }
    } catch (e) {
      print('Something went wrong : ${e.toString()}');
    }
  }
}

Answer 1

Here is an example:

class DataTablePage extends StatelessWidget {
  DataTablePage({Key? key}) : super(key: key);

  final apiData =  [
    {
      "Title": "NUMBER",
      "Value": "07588"
    },
    {
      "Title": "NR_2",
      "Value": "255"
    },
    {
      "Title": "FIRST NAME",
      "Value": "Josheph"
    },
    {
      "Title": "NAME",
      "Value": "Loise"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: getColumns(apiData.first),
            rows: getRows(apiData),
          ),
        ),
      ),
    );
  }

  getColumns(Map<String, dynamic> map) {
    List<dynamic> titles = [];
    map.forEach((key, value) {
      titles.add(key);
    });
    return titles
        .map(
          (e) => DataColumn(
        label: Align(
          alignment: Alignment.center,
          child: Text(
            e,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    )
        .toList();
  }
  
  getRows(List<Map<String, dynamic>> data) {
    List<List<dynamic>> lists = [];
    List<DataRow> rowList = [];
    List<List<DataCell>> cells = [];
    for (int i = 0; i < data.length; i++) {
      lists.add(<dynamic>[]);
    }
    int i = 0;
    for (var element in data) {
      element.forEach((key, value) {
        lists[i].add(value);
      });
      i++;
    }

    for (int j = 0; j < lists.length; j++) {
      cells.add(<DataCell>[]);
    }

    for (int i = 0; i < lists.length; i++) {
      for (int j = 0; j < lists[i].length; j++) {
        cells[i].add(DataCell(
          Text(lists[i][j]),
        ));
      }
    }
    for (int k = 0; k < cells.length; ++k) {
      rowList.add(
        DataRow(
          cells: cells[k],
          color: k.isEven
              ? MaterialStateColor.resolveWith((states) => Colors.white)
              : MaterialStateColor.resolveWith(
                (states) => const Color(0xffFAF9F6),
          ),
        ),
      );
    }
    return rowList;
  }
}

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: const <DataColumn>[
        DataColumn(
          label: Text(
            'Title',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Value',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        
      ],
      rows: const <DataRow>[
          for(map in apiData)
            DataRow(
                cells: <DataCell>[
                    DataCell(map['Title']),
                    DataCell(map['Value']),
                ],
            ),
      ],
    );
  }
}