'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?

enter image description here

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