'use getx in flutter datatable's datasource instead of stateful widget
I tried to change rowCount dynamically using Getx in flutter's Datatable DataSource, but it didn't change when I surrounded it with obx. If I check with ever (), the datasource change itself is detected correctly, but the screen is not updated for some reason. After all, I succeeded in dynamic change by using stateful widget, but does anyone know how to do this with getx?
with getx:
class _MyDataTable extends StatelessWidget {
_MyDataTable() {
ever(dataSource, (_) => print("dataSource changed"));
}
final dataSource = _DataSource().obs;
List<DataColumn> _dataColumList = [
DataColumn(label: Icon(Icons.star)),
DataColumn(label: Text("aaaa")),
DataColumn(label: Text("bbbb")),
DataColumn(label: Text("cccc")),
DataColumn(label: Text("dddd")),
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
width: double.infinity,
child: Obx(() => PaginatedDataTable(
rowsPerPage: 50,
columns: [
for (var i in _selectedIndexs) _dataColumList[i],
],
source: dataSource.value))),//change of dataSource will not update view.
ElevatedButton(
onPressed: () {
// dataSource.value.changeRowCount();
dataSource.update((dataSource) {
dataSource!._rowCount++;
});
},
child: Obx(() => Text(
"change row count"))),
],
));
}
}
class _DataSource extends DataTableSource {
int _rowCount = 50;
@override
DataRow getRow(int index) {
List<DataCell> dataCellList = [
DataCell(
.........
)),
];
/// 1行文のデータ
return DataRow(cells: [
for (var i in _selectedIndexs) dataCellList[i],
]);
}
@override
int get rowCount => _rowCount;
@override
bool get isRowCountApproximate => false;
@override
int get selectedRowCount => 0;
}
with stateful Widget (Work correctly)
class _MyDataTableState extends State<MyDataTable> {
final GlobalController global = Get.find();
var dataSource = new _DataSource();
List<DataColumn> _dataColumList = [
DataColumn(label: Icon(Icons.star)),
DataColumn(label: Text("aaaa")),
DataColumn(label: Text("bbbb")),
DataColumn(label: Text("cccc")),
DataColumn(label: Text("dddd")),
];
@override
Widget build(BuildContext context) {
return Obx(() => SingleChildScrollView(
child: Column(
children: [
SizedBox(
width: double.infinity,
child: PaginatedDataTable(
rowsPerPage: 50,
columns: [
for (var i in _selectedIndexs) _dataColumList[i],
],
source: dataSource)),
MaterialButton(
onPressed: () {
setState(() {
dataSource.changeRowCount();
});
},
child: Text(
'change row count',
),
),
],
)));
}
}
class _DataSource extends DataTableSource {
int _rowCount = 50;
void changeRowCount() {
_rowCount++;
notifyListeners();
}
@override
DataRow getRow(int index) {
List<DataCell> dataCellList = [
DataCell(
.........
)),
];
/// 1行文のデータ
return DataRow(cells: [
for (var i in _selectedIndexs) dataCellList[i],
]);
}
@override
int get rowCount => _rowCount;
@override
bool get isRowCountApproximate => false;
@override
int get selectedRowCount => 0;
}
Solution 1:[1]
In the end, I succeeded in updating view by doing this:
var newDataSource = _DataSource();
newDataSource._rowCount = 100;
dataSource.value = newDataSource;
Solution 2:[2]
On your `ElevatedButton':
onPressed: () {
dataSource._rowCount++;
var ds = dataSource;
dataSource.value = ds;
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Tatsuhiko Mizuno |
Solution 2 | S. M. JAHANGIR |