[flutter] DataTable에서 특정 셀에 이미지 추가하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 테이블 형식의 데이터를 표시할 때 유용한 위젯입니다. 기본적으로 텍스트 데이터를 표시하는 데 사용되지만, 때로는 특정 셀에 이미지를 추가해야 할 수도 있습니다. 이를 위해 셀의 내용을 사용자 정의하여 이미지를 표시할 수 있습니다.

1. 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('DataTable with Images')),
        body: Center(
          child: DataTable(
            columns: const <DataColumn>[
              DataColumn(label: Text('Name')),
              DataColumn(label: Text('Image')),
            ],
            rows: <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Product A')),
                  DataCell(Image.asset('assets/product_a.jpg')),
                ],
              ),
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Product B')),
                  DataCell(Image.asset('assets/product_b.jpg')),
                ],
              ),
              // Add more DataRow as needed
            ],
          ),
        ),
      ),
    );
  }
}

위의 예제에서는 DataTable을 사용하여 두 개의 열로 구성된 형식의 데이터를 표시하고 있습니다. 두 번째 열에는 이미지 위젯이 포함되어 있습니다. 이미지는 Image.asset를 사용하여 앱의 assets 디렉토리에 있는 이미지 파일을 로드하여 표시합니다.

2. DataTable의 셀에 다른 유형의 이미지 추가하기

위의 예제에서는 Image.asset를 사용하여 assets 디렉토리에 있는 이미지를 표시했지만, 네트워크나 로컬 파일 시스템에서 이미지를 로드하여 표시할 수도 있습니다. 다양한 이미지 소스를 사용하는 방법은 다음과 같습니다.

네트워크 이미지 사용하기

DataCell(Image.network('https://example.com/image.jpg')),

로컬 파일 시스템에서 이미지 사용하기

DataCell(Image.file(File('path/to/image.jpg'))),

위의 예제들은 DataTable의 DataCell에 다양한 유형의 이미지를 추가하는 방법을 보여줍니다.

이제, Flutter의 DataTable을 사용하여 특정 셀에 이미지를 추가하는 방법에 대해 이해했습니다. 다양한 이미지 소스를 활용하여 원하는 이미지를 표시할 수 있습니다.