Question 78532 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make data column clickable in Flutter?

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

2

Answers


  1. 0

    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),
            )),
          )
          ,
        ),
    Login or Signup to reply.
  2. 0

    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')),
          ],
        ),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search