[flutter] DataTable에서 행을 클릭하여 상세 정보 표시하는 방법

18 Dec 2023

flutter

웹 애플리케이션이나 관리용 대시보드와 같은 컨텐츠를 표시하는 데 많이 사용되는 DataTable에서 특정 행을 클릭했을 때 해당 행의 상세 정보를 표시하는 기능은 유용하게 활용될 수 있습니다. Flutter에서는 이러한 기능을 쉽게 구현할 수 있습니다.

DataTable 구성 요소

기본적으로 DataTable은 행과 열로 구성되어 있습니다. 각 행은 DataRow 위젯으로 표시되며, 각 열은 DataCell 위젯으로 표시됩니다.

DataTable(
  columns: [
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('홍길동')),
      DataCell(Text('25')),
    ]),
    DataRow(cells: [
      DataCell(Text('김철수')),
      DataCell(Text('30')),
    ]),
  ],
)

클릭 이벤트 처리

특정 행을 클릭했을 때 상세 정보를 표시하기 위해서는 InkWell 위젯을 사용하여 각 DataRow를 감싸고 onTap 콜백을 설정해야 합니다.

  DataTable(
    columns: [
      DataColumn(label: Text('이름')),
      DataColumn(label: Text('나이')),
    ],
    rows: [
      DataRow(
        cells: [
          DataCell(
            InkWell(
              onTap: () {
                _showDetail('홍길동', '25');
              },
              child: Text('홍길동'),
            ),
          ),
          DataCell(
            Text('25'),
          ),
        ],
      ),
    ],
  )

상세 정보 표시

클릭 이벤트가 발생했을 때 상세 정보를 표시하기 위해서는 showModalBottomSheet나 Navigator를 사용하여 새로운 화면이나 바텀 시트를 표시할 수 있습니다.

void _showDetail(String name, String age) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext builder) {
      return Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(title: Text('이름: $name')),
            ListTile(title: Text('나이: $age')),
          ],
        ),
      );
    },
  );
}

위의 예제 코드를 활용하여 DataTable에서 특정 행을 클릭하여 상세 정보를 표시하는 기능을 구현할 수 있습니다.

이러한 기능을 조합하여 사용자가 편리하게 정보를 확인하고 조작할 수 있는 다양한 애플리케이션을 구축할 수 있습니다.

참고 자료

Flutter DataTable: https://api.flutter.dev/flutter/material/DataTable-class.html
InkWell: https://api.flutter.dev/flutter/material/InkWell-class.html