Flutter - DataColumn clickable?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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')),
          ],
        ),
      ],
    );
  }
}