Do someone know how to add dynamically more rows into the DataTable in Flutter. As you can see my code is very 'hardcoded' [line: 11-31].
There should be a way to get rid of writing more and more DataRows.
Code:
class DataTableWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Text('Patch')),
DataColumn(label: Text('Version')),
DataColumn(label: Text('Ready')),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('AAAAAA')),
DataCell(Text('1')),
DataCell(Text('Yes')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('BBBBBB')),
DataCell(Text('2')),
DataCell(Text('No')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('CCCCCC')),
DataCell(Text('3')),
DataCell(Text('Yes')),
],
),
],
);
}
}
Show activity on this post. Create the list beforehand in the build method. final rows = <TableRow>[]; for (var rowData in myRowDataList) { rows. add(TableRow( ... // Generate a TableRow using rowData )); } ... Table( columnWidths: { 0: FlexColumnWidth(1.0), 1: FlexColumnWidth(2.0), }, border: TableBorder.
A DataTable is a material design used to display data on a table or in rows and columns. A Data table is used to show the data which have columns and rows as child, a Column is used to set the name of the column, and a Row is used to set the values of the columns.
Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach.
You can use
listOfColumns.map(((element) => DataRow(...))).toList()
This is your code using this method.
class DataTableWidget extends StatelessWidget {
final List<Map<String, String>> listOfColumns = [
{"Name": "AAAAAA", "Number": "1", "State": "Yes"},
{"Name": "BBBBBB", "Number": "2", "State": "no"},
{"Name": "CCCCCC", "Number": "3", "State": "Yes"}
];
// DataTableWidget(this.listOfColumns); // Getting the data from outside, on initialization
@override
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Text('Patch')),
DataColumn(label: Text('Version')),
DataColumn(label: Text('Ready')),
],
rows:
listOfColumns // Loops through dataColumnText, each iteration assigning the value to element
.map(
((element) => DataRow(
cells: <DataCell>[
DataCell(Text(element["Name"])), //Extracting from Map element the value
DataCell(Text(element["Number"])),
DataCell(Text(element["State"])),
],
)),
)
.toList(),
);
}
}
You could do something like this:**
class DataTableWidget extends StatelessWidget {
List results=[] ;
intState((){
super.iniState();
this.getSale();
})
Future<String> getData () async {
var response = await http.get(
"$saleUrl/?format=json",
);
setState(() {
var dataConvertedToJson =
json.decode(utf8.decode(response.bodyBytes));
results = dataConvertedToJson['results'];
});
print('${results.length}');
return "successful";
}
DataRow _getDataRow(result) {
return DataRow(
cells: <DataCell>[
DataCell(Text(data["text1"])),
DataCell(Text(data["text2"])),
DataCell(Text(data["text3"])),
],
);
}
@override
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Text('Patch')),
DataColumn(label: Text('Version')),
DataColumn(label: Text('Ready')),
],
rows: List.generate(
results.length, (index) => _getDataRow(results[index])),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With