Hide checkbox in a flutter DataTable

Question

I have a DataTable where I need to edit quantities. I am detecting which row was selected with the code below which works fine but I'd like to hide the CheckBox Column

Any suggestion on how to keep the current behaviour without the checkbox column?

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(
          "Sample",
          style: TextStyle(color: Colors.white),
        ),
    body: Column(children: <Widget>[
      DataTable(
        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,
    ));
  }
}

Can you please add more lines of your codes or screenshot if possible?, it's bit hard to understand with this codes or details. — Shady Boshra, Mar 24 '20 at 21:49
The above produces a DataTable. The DataTable has the first column of type CheckBox like to allow selection of multiple rows but I don't needthat column and I don't know how to hide it. — jacace, Mar 26 '20 at 17:12

Shady Boshra · Accepted Answer · 2020-03-27T12:01:50.203

5

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 Mar 27 '20 at 12:01

answered Mar 26 '20 at 17:42

Shady Boshra

2,521
3
23
35

1

this property does not exist as per error below. Maybe you have a different version? I am running SDK flutter_windows_v1.12.13+hotfix.8-stable Compiler message: Error: No named parameter with the name showCheckboxColumn: false, ^^^^^^^^^^^^^^^^^^ – jacace Mar 27 '20 at 10:00
I think you miss something, check your code again and this parameter is in `DataTable`. Upgrade your Dart and Flutter versions if it need to. If not solved, please copy and paste my code in a new sticky project and try it, or same project as you want, if not solved, please send screenshot with your code again. – Shady Boshra Mar 27 '20 at 10:07
I tried again but this property is not part of DataTable and I am running the latest version of dart and flutter. I even reviewed the documentation in the flutter official page and I can say this property does not exist, see: https://api.flutter.dev/flutter/material/DataTable-class.html – jacace Mar 27 '20 at 10:28
Finally I got it, you are right, there's no property in `DataTable` in Stable branch, you have to change the channel to master, you can do it with cmd `flutter channel master` then `flutter upgrade`, some people don't recommend it, but if you don't have a problem, do it. – Shady Boshra Mar 27 '20 at 12:00
Also, I did edited my answer, if it worked for you, you can mark it as an answer. – Shady Boshra Mar 27 '20 at 12:02
Actually I just found the answer below: https://stackoverflow.com/questions/54669526/how-to-remove-checkbox-icon-of-datatable-in-flutter You just only need to omit onSelectChanged. – jacace Mar 27 '20 at 16:19
No problem, your answer works, my answer works, that's great, anyone can find the preferred solution for him – Shady Boshra Mar 27 '20 at 16:27

Hide checkbox in a flutter DataTable

1 Answers1