[flutter] DataTable에서 다른 데이터 소스를 사용하여 데이터 가져오는 방법

18 Dec 2023

flutter

Flutter 앱을 개발하다보면 DataTable 위젯을 사용하여 데이터를 효율적으로 표시하고 관리해야 할 때가 있습니다. 그러나 때로는 DataTable의 데이터 원본이 단순한 리스트나 맵이 아니라 다른 소스에서 온 데이터일 수 있습니다. 이 포스트에서는 Flutter에서 DataTable 위젯을 사용하면서 다른 데이터 소스에서 데이터를 가져오는 방법에 대해 알아보겠습니다.

1. 데이터 소스 클래스 생성

가장 먼저, 다른 데이터 소스에서 데이터를 가져오기 위해 데이터 소스 클래스를 생성해야 합니다. 이 클래스는 원격 API, 로컬 데이터베이스 또는 다른 소스에서 데이터를 가져오는 데 사용될 수 있습니다. 예를 들어, 다음은 API를 호출하여 데이터를 가져오는 데이터 소스 클래스의 예시입니다.

class RemoteDataSource {
  Future<List<MyData>> fetchData() async {
    // API 호출 및 데이터 가져오는 로직
  }
}

2. DataTable 위젯에 데이터 바인딩

다음으로, DataTable 위젯에 데이터를 바인딩해야 합니다. 데이터를 가져오는 과정은 FutureBuilder 위젯을 사용하여 비동기적으로 처리할 수 있습니다.

FutureBuilder<List<MyData>>(
  future: RemoteDataSource().fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // 데이터 로딩 중일 때의 UI
      return CircularProgressIndicator();
    } else {
      if (snapshot.hasError) {
        // 에러 발생 시의 UI
        return Text('Error: ${snapshot.error}');
      } else {
        // 데이터 로딩 완료 후의 UI
        return DataTable(
          columns: [
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            // 필요한 만큼의 DataColumn 추가
          ],
          rows: snapshot.data.map((data) => DataRow(
            cells: [
              DataCell(Text(data.value1)),
              DataCell(Text(data.value2)),
              // 필요한 만큼의 DataCell 추가
            ],
          )).toList(),
        );
      }
    }
  },
)

위의 예시에서는 FutureBuilder를 사용하여 RemoteDataSource().fetchData()를 통해 데이터를 비동기적으로 가져와서 DataTable에 데이터를 바인딩하고 있습니다.

이제 데이터 소스 클래스를 생성하고 DataTable 위젯에 데이터를 바인딩하는 방법에 대해 알아보았습니다. 이를 통해 Flutter 앱에서 다른 데이터 소스로부터 데이터를 효율적으로 가져와 DataTable에 표시하는 방법을 이해할 수 있었습니다.

참고 문헌:

Flutter 공식 문서: https://flutter.dev/docs
Flutter DataTable 위젯 API 레퍼런스: https://api.flutter.dev/flutter/material/DataTable-class.html