How to dynamically add dynamic List value into Flutter DataTable? - flutter

Question

I have dynamic List as shown below:
List<List<dynamic>> _userTransactionList;
The List contains these values:
[
[12.9, test, 80, 357.24, James],
[88.0, test, 19, 357.24, Carol],
[196.55, test, 34, 357.24, Matthew],
[48.0, test, 59, 357.24, Brown]
]
As shown above, my _userTransactionList length is 4. I need 3 column as:
Name Age Amount
And row cell will be:
Name Age Amount
James 80 12.9
Carol 19 88.0
Matthew 34 199.55
Brown 59 48.0
I can place the cell value manually as shown below, but I don't know how to get those value from list and add to row cells dynamically. Because of my List<List> _userTransactionList values comes from remote server I need to fill DataTable dynamically. Any idea?
Manual Code:
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columnSpacing: 30.0,
columns: <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Amount',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Mail',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('James')),
DataCell(Text('80')),
DataCell(Text('12.9')),
DataCell(
IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('James 80 12.9'),
),
);
},
icon: Icon(
Icons.email_outlined,
color: Colors.red,
),
),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Carol')),
DataCell(Text('19')),
DataCell(Text('88.0')),
DataCell(
IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Carol 19 88.0'),
),
);
},
icon: Icon(
Icons.email_outlined,
color: Colors.red,
),
),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Matthew')),
DataCell(Text('34')),
DataCell(Text('199.55')),
DataCell(
IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Matthew 34 199.55'),
),
);
},
icon: Icon(
Icons.email_outlined,
color: Colors.red,
),
),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Brown')),
DataCell(Text('59')),
DataCell(Text('48.0')),
DataCell(
IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Brown 59 48.0'),
),
);
},
icon: Icon(
Icons.email_outlined,
color: Colors.red,
),
),
),
],
),
],
),
);

Answer 1

Full Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
List<List<dynamic>> _userTransactionList = [
[12.9, "BxC", 80, 357.24, "James"],
[88.0, "ArD", 19, 145.00, "Carol"],
[196.55, "VsT", 34, 18.60, "Matthew"],
[48.0, "IhO", 59, 92.19, "Brown"]
];
#override
Widget build(BuildContext context) {
List<DataRow> rows = [];
for (var i = 0; i < _userTransactionList.length; i++) {
rows.add(DataRow(cells: [
DataCell(
Text(_userTransactionList[i][4].toString()),
),
DataCell(
Text(_userTransactionList[i][2].toString()),
),
DataCell(
Text(_userTransactionList[i][0].toString()),
),
DataCell(
IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Matthew 34 199.55'),
),
);
},
icon: Icon(
Icons.email_outlined,
color: Colors.red,
),
),
),
]));
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
//child: _getData01(_userTransactionList, context)
child: DataTable(
columnSpacing: 30.0,
columns: <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Amount',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Mail',
style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
),
),
],
rows: rows,
));
}
}