How to change width of datacells dynamically in flutter DataTable? - flutter

Question

I have found in this link a way to place data from JSON dynamically to DataTable() widget:
Dynamically display JSON data in data table layout in flutter
In that post he has ColumnWidths in the json but he doesn't show how he changes width of the individual datacell columns.
I have used that example for myself as well and I wonder how I can use the column widths from json as well to change width of individual data cells?
This is the json I am using:
[
{
"table-data": [
{
"table-label-data": "SL.´Customer´Balance Qty´Amount´Oldest / Recent ",
"table-row-list": [
{
"table-row-data": "1. ´ABD ´14 / 14.60´11,090´313 / 313"
},
{
"table-row-data": "1. ´ABD ´14 / 14.60´11,090´313 / 313"
}
],
"table-cell-widths": "40´168´96´96´108"
}
]
}
]
This is the model I am using:
import 'dart:ui';
class TableModel {
TableModel(this.labelData, this.rowData);
List<String> labelData;
List<List<String>> rowData;
factory TableModel.fromJson(Map<String, dynamic> json) {
return TableModel(
json['table-data'][0]["table-label-data"].split('´').toList(),
buildRowData(json),
);
}
}
List<List<String>> buildRowData(Map<String, dynamic> json) {
List<List<String>> rowDataCollection = [];
json['table-data'][0]["table-row-list"].forEach((rows) {
rowDataCollection.add(rows['table-row-data'].split('´').toList());
});
return rowDataCollection;
}
For the view as you can see i use a variable width inside SizedBox widget to change width, but it is now changing all widths but i want to change individual data cell widths based on json.
This is the view:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:test_project/controllers/getters/get_test.dart';
import '../models/table_model.dart';
import '../models/test_model.dart';
class AppView2 extends StatefulWidget {
const AppView2({
Key? key,
}) : super(key: key);
#override
_AppViewState createState() => _AppViewState();
}
class _AppViewState extends State<AppView2> {
Future<void> generateList() async {
String responseBody =
await rootBundle.loadString("assets/tableJsonData.json");
var list = await json.decode(responseBody).cast<Map<String, dynamic>>();
return await list
.map<TableModel>((json) => TableModel.fromJson(json))
.toList();
}
#override
void initState() {
generateList();
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('DataTable'),
),
body: FutureBuilder(
future: generateList(),
builder: (context, AsyncSnapshot snapShot) {
if (snapShot.data == null ||
snapShot.connectionState == ConnectionState.waiting ||
snapShot.hasError ||
snapShot.data.length == 0) {
return Container(
child: Center(child: CircularProgressIndicator()),
);
} else {
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: snapShot.data.length,
itemBuilder: (BuildContext context, int index) {
final TableModel table = snapShot.data[index];
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: table.labelData.map<DataColumn>((e) {
var columnName = e;
return DataColumn(
label: Text(
columnName,
));
}).toList(),
rows: table.rowData.map<DataRow>((e) {
return DataRow(
cells: e.map<DataCell>((e) {
var dataCell = e;
dynamic width;
return DataCell(SizedBox(
width: width,
child: Text(
dataCell,
),
));
}).toList());
}).toList(),
),
);
});
}
},
)));
}
}