[flutter] DataTable에서 특정 셀에 클릭 이벤트 추가하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 데이터를 표 형식으로 표시하는 데 유용합니다. 하지만 기본적으로 DataTable의 셀은 클릭 이벤트를 처리하지 않습니다. 특정 셀에 클릭 이벤트를 추가하려면 다음과 같이 할 수 있습니다.

1. GestureDetector를 사용하여 셀에 클릭 이벤트 추가하기

DataTable의 각 셀에 GestureDetector를 추가하여 클릭 이벤트를 처리할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DataTable(
            columns: const <DataColumn>[
              DataColumn(label: Text('Name')),
              DataColumn(label: Text('Age')),
            ],
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(
                    GestureDetector(
                      onTap: () {
                        // 특정 셀을 클릭했을 때 수행할 작업
                        print('Name cell clicked');
                      },
                      child: Text('John'),
                    ),
                  ),
                  DataCell(Text('30')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 DataTable의 첫 번째 셀에 GestureDetector를 추가하여 해당 셀을 클릭했을 때 특정 작업(print 문)을 수행하도록 설정했습니다.

이제 DataTable에서 특정 셀에 클릭 이벤트를 추가하는 방법을 알아보았습니다.

참고 자료

Flutter DataTable 공식 문서

부가적으로 DataTable의 특정 셀에 클릭 이벤트를 추가하는 방법에 대해 더 자세히 알아보았습니다. 만약 추가적인 정보가 필요하다면, 언제든지 문의해 주세요!