How can I make a text in a table clickable in Flutter?

Viewed 38
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    backgroundColor: const Color(0xff004a6f),
    title: const Text(
      'Üretici Mizan',
      style: TextStyle(fontFamily: 'Poppins', fontSize: 18),
    ),
  ),
  drawer: const NavBar(),
  body: Column(
    children: [
      SfDataGrid(
        source: umizanDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        columns: <GridColumn>[
          GridColumn(
              columnName: 'Açıklama',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'Açıklama',
                    style: TextStyle(fontFamily: 'Poppins'),
                  ))),
    ),
   );
  }
}



 List<UMizan> getUMizanData() {
      return [
        UMizan('A', '0B', '10.11.2021'),
        UMizan('B', '36B', '12.01.2022'),
        UMizan('C', '353B', ''),
      ];
    }

class UMizan {
  UMizan(
    this.id,
    this.name,
    this.designation,
  );

  final String id;

  final String name;

  final String designation;
}

class UMizanDataSource extends DataGridSource {
  UMizanDataSource({required List<UMizan> UMizanData}) {
    _UMizanData = UMizanData.map<DataGridRow>((e) => DataGridRow(cells: [
          DataGridCell<String>(
            columnName: 'id',
            value: e.id,
          ),
          DataGridCell<String>(
            columnName: 'name',
            value: e.name,
          ),
          DataGridCell<String>(columnName: 'designation', value: e.designation),
        ])).toList();
  }

  List<DataGridRow> _UMizanData = [];

  @override
  List<DataGridRow> get rows => _UMizanData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        color: Color.fromARGB(255, 0, 0, 0),
        cells: row.getCells().map<Widget>((e) {
          return Container(
            color: Color.fromARGB(255, 217, 232, 245),
            alignment: Alignment.center,
            padding: EdgeInsets.all(8.0),
            child: Text(
              e.value.toString(),
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontFamily: 'Work Sans',
                  fontSize: 12,
                  fontWeight: FontWeight.w500),
            ),
          );
        }).toList());
  }
}

In this code, I created 3 rows of data. Then I gave this row and its contents style properties. When the user clicks on A, B, C data or the rows they contain, I want to redirect to a certain page.

When the user clicks on the A, B, C data or the lines containing them, it will redirect to the relevant page. But I can't assign any method to these rows.

enter image description here

1 Answers

You can wrap the Container in the buildRow method into a GestureDetector widget, which has an onTap parameter to handle taps:

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        color: Color.fromARGB(255, 0, 0, 0),
        cells: row.getCells().map<Widget>((e) {
          // this is the widget that handles gestures
          return GestureDetector(
            onTap: () {
              debugPrint('onTap: ${row.toString()}');
            },
            child: Container(
              color: Color.fromARGB(255, 217, 232, 245),
              alignment: Alignment.center,
              padding: EdgeInsets.all(8.0),
              child: Text(
                e.value.toString(),
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontFamily: 'Work Sans',
                    fontSize: 12,
                    fontWeight: FontWeight.w500),
              ),
            ),
          );
        }).toList());
  }
Related