[flutter] DataTable에서 행 선택 및 선택된 행 스타일 변경하는 방법

18 Dec 2023

flutter

Flutter 애플리케이션에서 데이터를 표시할 때 DataTable 위젯을 사용하는 경우가 많습니다. DataTable는 테이블 형식으로 데이터를 정렬하고 표시할 수 있는 강력한 위젯입니다. 이 글에서는 DataTable에서 행을 선택하고 선택된 행의 스타일을 변경하는 방법에 대해 알아보겠습니다.

DataTable 위젯

DataTable는 Flutter Material 패키지에 포함된 위젯으로, 행과 열이 있는 데이터를 표 형태로 표시하는 데 사용됩니다. 각 행은 DataRow 위젯으로, 각 열은 DataCell 위젯으로 정의됩니다.

import 'package:flutter/material.dart';

class MyDataTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('이름')),
        DataColumn(label: Text('나이')),
      ],
      rows: [
        DataRow(cells: [
          DataCell(Text('홍길동')),
          DataCell(Text('30')),
        ]),
        DataRow(cells: [
          DataCell(Text('김철수')),
          DataCell(Text('25')),
        ]),
      ],
    );
  }
}

선택된 행 스타일 변경

DataTable에서 특정 행을 선택하고 선택된 행의 스타일을 변경하려면, DataColumn의 속성 중 하나인 onSelectChanged를 사용합니다. 선택된 행의 색상이나 텍스트 스타일을 변경할 수 있습니다.

DataColumn(
  label: Text('이름'),
  onSort: (columnIndex, ascending) {
    setState(() {
      _sortColumnIndex = columnIndex;
      if (ascending) {
        _dataRows.sort((a, b) => a.name.compareTo(b.name));
      } else {
        _dataRows.sort((a, b) => b.name.compareTo(a.name));
      }
    });
  },
)

위의 코드에서 onSelectChanged를 사용하여 선택된 행의 스타일을 변경하는 로직을 추가할 수 있습니다.

결론

Flutter의 DataTable을 사용하면 효율적으로 데이터를 표 형태로 표시할 수 있습니다. 선택된 행의 스타일을 변경하려면 onSelectChanged를 활용하여 원하는 스타일을 적용할 수 있습니다. 이를 통해 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고 자료: Flutter DataTable 클래스