How to make data column clickable in Flutter? - flutter

Question

I would like to make a datacolumn clickable, such that when the user clicks on it, an overlay opens up. I've tried to add a IconButton, but i doesn't work. Does anyone has an idea how to do that properly in flutter?
Code:
SizedBox(
height: 500,
width: double.infinity,
child: DataTable2(
minWidth: 600,
columnSpacing: defaultPadding,
columns: const [
DataColumn(
IconButton( <------------- This doesn't work
icon: Icons.abs,
onPressed: () {},
),
label: Text("Car ID"),
),
DataColumn(label: Text("Date")),
DataColumn(label: Text("Avg. Speed")),
DataColumn(label: Text("Video File")),
],
rows: List.generate(demoRecentFiles.length,
(index) => recentFileDataRow(demoRecentFiles[index])),
)),

Answer 1

To make data column clickable, just wrap your label with GestureDetector() widget.
DataColumn(
label: Expanded(
child: GestureDetector(onTap: (){
print('Hey');
}, child: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
)),
)
,
),

Answer 2

label attribute of DataColumn as well as positional parameter of DataCell in DataRow can be any widget. So feel free to use any clickable widget there. Here's working snippet with IconButton like you wanted it to be. You can try it in Dartpad.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
#override
Widget build(BuildContext context) {
return DataTable(
columns: <DataColumn>[
DataColumn(
label: Expanded(
child: IconButton(
icon: const Icon(Icons.favorite),
onPressed: () {
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('It works'),
actions: <Widget>[
TextButton(
child: const Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('1')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('2')),
],
),
],
);
}
}