How to remove CheckBox icon of DataTable in Flutter?

问题

I'm implementing a DataTable to show some data, to do this I'm using a PaginatedDataTable, so I can load and show my data, the problem is that my DataTable shows a CheckBox per row and I don't want it.

This is my current result:

I want remove these CheckBox but I not have idea how to do it.

Code:

ExpensesDataSource _expensesDataSource = ExpensesDataSource([expense]);

    Widget getDataTable() {
      return PaginatedDataTable(
        header: Text('Despesas', style: TextStyle(color: Color(0xFF4C4C4C), fontWeight: FontWeight.bold, fontSize: 15),),
        columns: <DataColumn>[
          DataColumn(
            label: Text("Data"),
            numeric: false,
          ),
          DataColumn(
            label: Text("Descrição"),
            numeric: false,
          ),
          DataColumn(
            label: Text("Total"),
            numeric: false,
          ),
        ],
        source: _expensesDataSource,
      );
  }


class ExpensesDataSource extends DataTableSource {

  List<Expense> _expenses = <Expense>[];
  int _selectedCount = 0;

  ExpensesDataSource(List<Expense> listExpenses) {
      this._expenses = listExpenses;
  }

  @override
  DataRow getRow(int index) {
    final Expense expense = _expenses[index];
    return DataRow.byIndex(
        index: index,
        onSelectChanged: (bool value) {
          print('Row selected: $value ${expense.name}');
        },
        cells: [
          DataCell(Text(expense.date)),
          DataCell(Text(expense.name)),
          DataCell(Text(Utils.convert2currency(expense.total_amount)))
        ]
    );
  }

  @override
  // TODO: implement rowCount
  int get rowCount => _expenses.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;

}

回答1:

It's possible if you are on master channel not on stable channel.

You have to add only one property to DataTable which is showCheckboxColumn to be false.

Your full code after edit will be

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(
          "Sample",
          style: TextStyle(color: Colors.white),
        ),
    body: Column(children: <Widget>[
      DataTable(
        showCheckboxColumn: false,
        sortAscending: true,
        columns: <DataColumn>[
          DataColumn(
            label: Text('Product name'),
          ),
          DataColumn(
            label: Text('Product Quantity'),
          ),
        ],
        rows: items
            .map(
              (itemRow) => DataRow(
                onSelectChanged: (bool selected) {
                  if (selected) {
                    //'row-selected: ${itemRow.index}'
                  }
                },
                cells: [
                  DataCell(
                    Text(itemRow.itemName),
                    showEditIcon: false,
                    placeholder: false,
                  ),
                  DataCell(
                    Text(itemRow.itemQuantity),
                    showEditIcon: true,
                    placeholder: false,
                    //onTap: _getSelectedRowInfo,
                  ),
                ],
              ),
            )
            .toList(),
      )
    ]),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ));
  }
}

Some flutter developer doesn't recommend change to master, but if no problem with you, you can change it using these commands: flutter channel master flutter upgrade

回答2:

Currently only by omitting onSelectionChange: ... or passing null instead of

    onSelectChanged: (bool value) {
      print('Row selected: $value ${expense.name}');
    },

https://docs.flutter.io/flutter/material/DataRow/onSelectChanged.html

回答3:

I delete these two of selected: and onSelectChanged: in DataRow.byIndex() and checkbox gone.

回答4:

Remove the onSelectChanged and selected property from DataRow and add this on each data cell..

DataCell(
    Text(
       employee.lastName.toUpperCase(),
    ),
    onTap: () {
      print("Tapped " + employee.firstName);
      // do whatever you want
    },
),

来源：https://stackoverflow.com/questions/54669526/how-to-remove-checkbox-icon-of-datatable-in-flutter

标签

datatable

dart

Flutter