CODEWITHSUNDEEP
flutterdartdatatable
Raine Dale Holgado
Raine Dale Holgado

Reputation: 3460

Flutter DataTable -Tap on entire Row

im new to Flutter. I need help on OnTap in DataCell. For example, instead of tapping one cell, I want the Row.

Heres my codes

DataTable(
     columns: <DataColumn>[
        DataColumn(
          label: Text("Title"),
          ),
        DataColumn(
          label: Text("Contacts"),
          ),
         )
        ],
         rows: contracts.map((contract) => DataRow(
             cells: [
               DataCell(Text(contract.title),
                  onTap: () {
                      Navigator.push(context, MaterialPageRoute(
                              builder: (context) => List(),),
                           );
                         }),
               DataCell(Text(contract.contacts),
                  onTap: () {
                      Navigator.push(context, MaterialPageRoute(
                              builder: (context) => List(),),
                           );
                         }),).toList()

i want to click on a specific row and it will route to another page also sends the index value of it.

Upvotes: 7

Views: 5344

Answers (5)

shengxi wu
shengxi wu

Reputation: 1

    DataTable(
        dividerThickness: 1,
        headingRowColor: MaterialStatePropertyAll(Colors.grey[200]),
        headingTextStyle: TextStyle(
          fontWeight: FontWeight.bold,
        ),
        showBottomBorder: true,
        showCheckboxColumn: false,
        columns: [
          DataColumn(label: Text('序号')),
          DataColumn(label: Text('错误类型')),
          DataColumn(label: Text('错误简介')),
          DataColumn(label: Text('最近上报时间')),
          DataColumn(label: Text('影响设备数')),
        ],
        rows: [
          DataRow(onSelectChanged: (isSelected) {

          }, cells: [
            DataCell(Text('1')),
            DataCell(Text('1001')),
            DataCell(Text('123')),
            DataCell(Text('10%')),
            DataCell(Text('123123')),
          ])
        ],
      )

Upvotes: 0

Tom O&#39;Sullivan
Tom O&#39;Sullivan

Reputation: 4016

Had the same issue, realised you could use the onSelectChanged from the DataRow.

Example from the DataTable

rows: searchList.map((item) {
        return DataRow(
          onSelectChanged: (bool value) {
             // ENTER CALLBACK HERE (It's not restricted to use the bool)
          },
          cells: ...

Note, this will make the Checkbox visible, if you do not require this then make sure you force the showCheckboxColumn to false in the DataTable:

    return DataTable(
      showCheckboxColumn: false,
      columns: [...]

Upvotes: 9

Codered
Codered

Reputation: 161

Try using DataRow.byIndex(), then use that index when wrapping your DataRow in a GestureDetector.

Upvotes: 0

Anton Guinto
Anton Guinto

Reputation: 255

There's a property in DataRow you can implement called onSelectChanged where you can put your function inside.

bool isSelected = false;

DataRow(
 selected: isSelected,
 onSelectChanged: (x) {
  setState(() {
   isSelected = x;
  });
 },
 cells: <DataCell>[
  DataCell(
   Text('Row1'),
  ),
 ],
),

Upvotes: 0

Vicky Salunkhe
Vicky Salunkhe

Reputation: 10975

To make the entire widget tappable

just wrap your widget with InkWell() or GestureDetector Widget

InkWell() widget will add a clickable shadow kind of effect when you press on the widget

whereas GestureDetector() widget won't

In your case instead of wrapping DataCell just wrap your DataRow widget

Upvotes: 0

Related Questions