How to display data in a table? - flutter

Question

I need to display the data that comes to me from the server as an array of objects. The number of objects may vary.
For example -
{"RowNumber":1,"WalletName":"Elsom","PayerPhoneNumber":"996555121212","CreatedDate":"2022-06-10T10:52:00","Amount":50.2,"CurrencyCode":"KGS"},
{"RowNumber":2,"WalletName":"O!","PayerPhoneNumber":"996555131313","CreatedDate":"2022-06-09T22:12:00","Amount":122.3,"CurrencyCode":"KGS"},
You need to display them in the form of a table, how to do this - I don’t understand at all, I processed the response from the server. I made a cycle, but how can I display it on the screen with such a code structure? -
class Report extends StatelessWidget {
var ressultat = json.decode(MyApp.resultat)['Transactions']; //here is an array of objects!!!!!
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: , //HERE HERE HERE
],
),
);
}
}
And where can I put the loop? -
var ress = json.decode(MyApp.resultat)['Transactions'];
print(ress[5]['Amount']);
for (int i = 0; i <= ress.length; i++) {
print(ress[i]);
}

Answer 1

I had a similar problem when wanting to see what was returning from a databse on the screen and slapped this together. It's by no means pretty but it does the job, just pass in a Map<String, dynamic> and a String title.
class Tabler extends StatelessWidget {
const Tabler({Key? key, required this.dataMap, required this.title})
: super(key: key);
final Map<String, dynamic> dataMap;
final String title;
#override
Widget build(BuildContext context) {
List<Widget> dataColumns = [];
for (var v in dataMap.values) {
dataColumns.add(_TablerBlock(
dataBlock: v,
));
}
return DefaultTextStyle(
style: TextStyle(fontSize: 25, color: Colors.black),
child: Container(
width: 400,
child: Column(children: <Widget>[
Text(dataMap.toString()),
Text(title),
SizedBox(height: 20),
...dataColumns
])));
}
}
class _TablerBlock extends StatelessWidget {
const _TablerBlock({Key? key, required this.dataBlock}) : super(key: key);
final dynamic dataBlock;
#override
Widget build(BuildContext context) {
List<Widget> block = [];
if (dataBlock is Map<String, dynamic>) {
for (var v in dataBlock.entries) {
block.add(_TablerRow(
dataRow: [v.key, v.value],
));
}
}
return Container(
child: Column(children: <Widget>[
...block,
]));
}
}
class _TablerRow extends StatelessWidget {
const _TablerRow({Key? key, required this.dataRow}) : super(key: key);
final List<dynamic> dataRow;
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(dataRow[0].toString() + ': '),
Text(dataRow[1].toString()),
],
);
}
}
Use it by calling
Center(
child: Tabler(dataMap: yourMap, title: 'title');
)
Note that it only works for a single Map.