[flutter] 스크롤바를 사용하여 테이블 구현하기

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 테이블을 구현하고 싶지만, 테이블의 크기가 화면을 벗어나는 경우가 발생할 수 있습니다. 이러한 경우에는 스크롤바를 추가하여 사용자가 테이블의 전체 내용을 볼 수 있도록 할 수 있습니다. 이 글에서는 플러터에서 스크롤바를 사용하여 테이블을 구현하는 방법에 대해 알아보겠습니다.

1. 스크롤 가능한 테이블 생성

먼저, DataTable 위젯을 사용하여 테이블을 생성합니다. 그리고 SingleChildScrollView 위젯을 사용하여 테이블을 감싸주면 테이블이 스크롤 가능해집니다.

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: DataTable(
    columns: [
      DataColumn(label: Text('항목')),
      DataColumn(label: Text('값')),
    ],
    rows: [
      DataRow(cells: [
        DataCell(Text('항목 1')),
        DataCell(Text('값 1')),
      ]),
      DataRow(cells: [
        DataCell(Text('항목 2')),
        DataCell(Text('값 2')),
      ]),
      // 추가적인 행
    ],
  ),
)

2. 스크롤바 스타일 지정

CustomScrollView 위젯을 사용하여 스크롤바의 스타일과 동작을 지정할 수 있습니다.

Scrollbar(
  child: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: DataTable(
      // 테이블 내용
    ),
  ),
)

3. 기타 옵션 추가

테이블의 헤더나 셀에 스타일을 추가하고 싶은 경우 DataColumn 또는 DataCell 위젯을 커스터마이징하여 사용할 수 있습니다.

DataColumn(
  label: Container(
    // 스타일을 추가할 위젯
  ),
),

이제 플러터에서 스크롤바를 사용하여 테이블을 구현하는 방법에 대해 알아보았습니다. 이를 참고하여 원하는 스타일과 동작을 지정하여 테이블을 구현해보세요.