Flutter의 데이터 테이블(DataTable) 사용법

Flutter에서 DataTable 위젯은 데이터 목록을 테이블 형식으로 표시하는 데 사용됩니다. 데이터 테이블은 행과 열로 구성되며, 정렬 및 필터링 기능을 제공합니다. 이번 글에서는 Flutter의 DataTable 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 DataTable 사용법

DataTable 위젯의 기본적인 사용법은 매우 간단합니다. columns 속성에 열을 정의하고, rows 속성에 행을 정의합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('DataTable Demo')),
        body: DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        columns: [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Age')),
          DataColumn(label: Text('Role')),
        ],
        rows: [
          DataRow(cells: [
            DataCell(Text('John Doe')),
            DataCell(Text('25')),
            DataCell(Text('Developer')),
          ]),
          DataRow(cells: [
            DataCell(Text('Jane Smith')),
            DataCell(Text('30')),
            DataCell(Text('Designer')),
          ]),
          DataRow(cells: [
            DataCell(Text('Alex Johnson')),
            DataCell(Text('28')),
            DataCell(Text('Manager')),
          ]),
        ],
      ),
    );
  }
}

 

위 코드는 기본적인 데이터 테이블을 생성합니다. columns는 테이블의 열을 정의하고, rows는 각 행의 데이터를 정의합니다.

2. 열 정렬 기능 추가

DataTable 위젯은 열을 정렬하는 기능을 제공합니다. 이를 위해 DataColumn의 onSort 속성을 사용하고, 테이블의 정렬 상태를 관리합니다.

 

class DataTableExample extends StatefulWidget {
  @override
  _DataTableExampleState createState() => _DataTableExampleState();
}

class _DataTableExampleState extends State<DataTableExample> {
  List<User> _users = [
    User('John Doe', 25, 'Developer'),
    User('Jane Smith', 30, 'Designer'),
    User('Alex Johnson', 28, 'Manager'),
  ];
  bool _sortAscending = true;
  int _sortColumnIndex = 0;

  void _sort<T>(Comparable<T> Function(User user) getField, int columnIndex, bool ascending) {
    _users.sort((a, b) {
      if (!ascending) {
        final User c = a;
        a = b;
        b = c;
      }
      final Comparable<T> aValue = getField(a);
      final Comparable<T> bValue = getField(b);
      return Comparable.compare(aValue, bValue);
    });

    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        sortColumnIndex: _sortColumnIndex,
        sortAscending: _sortAscending,
        columns: [
          DataColumn(
            label: Text('Name'),
            onSort: (columnIndex, ascending) => _sort<String>((user) => user.name, columnIndex, ascending),
          ),
          DataColumn(
            label: Text('Age'),
            numeric: true,
            onSort: (columnIndex, ascending) => _sort<num>((user) => user.age, columnIndex, ascending),
          ),
          DataColumn(
            label: Text('Role'),
            onSort: (columnIndex, ascending) => _sort<String>((user) => user.role, columnIndex, ascending),
          ),
        ],
        rows: _users.map((user) {
          return DataRow(cells: [
            DataCell(Text(user.name)),
            DataCell(Text(user.age.toString())),
            DataCell(Text(user.role)),
          ]);
        }).toList(),
      ),
    );
  }
}

class User {
  final String name;
  final int age;
  final String role;

  User(this.name, this.age, this.role);
}

 

 

위 코드는 DataTable에 정렬 기능을 추가합니다. 열 제목을 클릭하면 해당 열을 기준으로 데이터가 정렬됩니다.

 

 

반응형

 

 

3. 선택 가능한 행 추가

DataTable 위젯에서 행을 선택할 수 있도록 하려면 DataRow의 selected 속성과 onSelectChanged 속성을 사용합니다.

 

class DataTableExample extends StatefulWidget {
  @override
  _DataTableExampleState createState() => _DataTableExampleState();
}

class _DataTableExampleState extends State<DataTableExample> {
  List<User> _users = [
    User('John Doe', 25, 'Developer'),
    User('Jane Smith', 30, 'Designer'),
    User('Alex Johnson', 28, 'Manager'),
  ];
  Set<User> _selectedUsers = Set<User>();

  void _onSelectedRow(bool selected, User user) {
    setState(() {
      if (selected) {
        _selectedUsers.add(user);
      } else {
        _selectedUsers.remove(user);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        columns: [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Age')),
          DataColumn(label: Text('Role')),
        ],
        rows: _users.map((user) {
          return DataRow(
            selected: _selectedUsers.contains(user),
            onSelectChanged: (bool? selected) => _onSelectedRow(selected!, user),
            cells: [
              DataCell(Text(user.name)),
              DataCell(Text(user.age.toString())),
              DataCell(Text(user.role)),
            ],
          );
        }).toList(),
      ),
    );
  }
}

class User {
  final String name;
  final int age;
  final String role;

  User(this.name, this.age, this.role);
}

 

위 코드는 행을 선택할 수 있는 기능을 추가합니다. 선택된 행은 _selectedUsers 집합에 추가되며, 사용자가 선택 상태를 변경할 수 있습니다.

4. 데이터 테이블 스타일링

DataTable 위젯의 스타일을 변경하려면 DataTable과 DataCell, DataColumn의 다양한 속성을 사용합니다.

 

DataTable(
  columns: [
    DataColumn(
      label: Text(
        'Name',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Age',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Role',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
  ],
  rows: _users.map((user) {
    return DataRow(
      cells: [
        DataCell(Text(user.name)),
        DataCell(Text(user.age.toString())),
        DataCell(Text(user.role)),
      ],
    );
  }).toList(),
)

 

위 코드는 열 제목에 이탤릭체 스타일을 적용합니다. 각 셀에도 개별적으로 스타일을 지정할 수 있습니다.

결론

DataTable 위젯은 Flutter 애플리케이션에서 데이터 목록을 테이블 형식으로 표시하는 데 매우 유용한 도구입니다. 기본 사용법부터 정렬 기능 추가, 선택 가능한 행, 스타일링 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. DataTable 위젯을 적절히 활용하여 직관적이고 효율적인 데이터 표시 인터페이스를 제공하는 애플리케이션을 만들어보세요.