[flutter] DataTable에서 페이지별 데이터 표시하는 방법

18 Dec 2023

flutter

Flutter 앱에서 대규모 데이터 세트를 표시해야할 때, DataTable 위젯은 매우 유용합니다. 그러나 한 번에 많은 양의 데이터를 표시할 경우 화면이 과부하되어 성능 문제가 발생할 수 있습니다. 이런 경우에 페이지별로 데이터를 표시하는 것이 유용합니다. 다음은 Flutter DataTable에서 페이지별 데이터를 표시하는 방법에 대한 안내입니다.

DataTable에 페이징 추가하기

DataTable에 페이징을 추가하려면, DataTable의 데이터를 페이지별로 분할하고 페이지간 이동을 제어해야 합니다. ListView나 SingleChildScrollView와 같은 스크롤 가능한 위젯과 함께 사용하여 각 페이지의 데이터를 표시합니다.

다음은 DataTable에 페이징을 추가하는 예제입니다.

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('Paged DataTable'),
        ),
        body: PagedDataTable(),
      ),
    );
  }
}

class PagedDataTable extends StatefulWidget {
  @override
  _PagedDataTableState createState() => _PagedDataTableState();
}

class _PagedDataTableState extends State<PagedDataTable> {
  // 데이터 세트
  List<Map<String, dynamic>> _data = List.generate(1000, (index) {
    return {'id': index, 'name': 'Item $index'};
  });

  // 페이지별 표시할 행 수
  final int _rowsPerPage = 10;
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    // 현재 페이지의 데이터 추출
    List<Map<String, dynamic>> pageData = _data.skip(_currentPage * _rowsPerPage).take(_rowsPerPage).toList();

    return SingleChildScrollView(
      child: DataTable(
        columns: [
          DataColumn(label: Text('ID')),
          DataColumn(label: Text('Name')),
        ],
        rows: pageData.map((data) {
          return DataRow(cells: [
            DataCell(Text(data['id'].toString())),
            DataCell(Text(data['name'])),
          ]);
        }).toList(),
      ),
    );
  }
}

위의 예제에서는 1000개의 항목을 가진 데이터 세트를 사용합니다. _currentPage 변수를 사용하여 현재 페이지를 추적하고, 페이지별로 데이터를 추출하여 표시합니다.

결론

Flutter DataTable에서 페이지별 데이터를 표시하는 것은 어려운 작업은 아니지만, 데이터를 효율적으로 관리하여 최적의 성능을 얻는 것은 중요합니다. 페이지별 표시는 대량의 데이터를 처리하는 데 매우 유용하며, 앞서 제시된 예제를 참고하여 자신의 프로젝트에 적용해 보세요.

내용이 유용하게 활용될 수 있도록 페이징, 스크롤, 데이터 관리에 대한 추가 정보를 제시하기 위해서 여기를 방문해보세요.