How to remove CheckBox icon of DataTable in Flutter?

Question

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;

}

I believe this link here should clear all your doubts. Flutter DataTable - Tap on row — Michel Thomas
– Michel Thomas, Commented Nov 21, 2019 at 14:35

Shady Boshra · Accepted Answer · 2020-07-25 11:45:48Z

11

UPDATE

Available now on Stable channel.

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

edited Jul 25, 2020 at 11:45

answered Mar 27, 2020 at 17:12

Shady Boshra

2,9413 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jago Over a year ago

Available in stable channel as of Flutter 1.17

jaredbaszler Over a year ago

This will get rid of the check box from all rows. I would like to figure out a way to get rid of the checkbox on a row by row basis. Such as from the above image, row 1 should have the check box because there is data in there but rows 2 and greater shouldn't have a selection checkbox.

Shady Boshra Over a year ago

I think you should make your custmized one.

Apk Builder · Accepted Answer · 2023-01-11 08:06:26Z

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

Your full code after the 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,
    ));
  }
}

Günter Zöchbauer · Accepted Answer · 2019-02-13 11:54:08Z

0

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

edited Feb 13, 2019 at 11:54

answered Feb 13, 2019 at 11:51

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

4 Comments

Augusto Over a year ago

And if I want liste the selection?

Günter Zöchbauer Over a year ago

Then there is currently no way to get rid of the checkbox as far as I know.

Augusto Over a year ago

I can change the CheckBox for another Icon or put on other side of table?

Günter Zöchbauer Over a year ago

As far as I know there is no other way to influence it except getting rid of it by not passing a selection changed handler. You could try to implement or extend DataRow and customize its behavior, but I don't know if this is possible. I'll reopen github.com/flutter/flutter/issues/26211

ThitSarNL · Accepted Answer · 2019-06-18 19:09:29Z

0

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

answered Jun 18, 2019 at 19:09

ThitSarNL

7201 gold badge10 silver badges24 bronze badges

Comments

Kikki · Accepted Answer · 2019-09-22 17:54:27Z

0

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
    },
),

answered Sep 22, 2019 at 17:54

Kikki

5051 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to remove CheckBox icon of DataTable in Flutter?

5 Answers 5

3 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related