[flutter] DataTable에서 헤더와 바디를 따로 스크롤하는 방법
Flutter의 DataTable을 사용할 때, 헤더와 바디를 따로 스크롤하기 원하는 경우가 있을 수 있습니다. 이를 구현하는 방법에 대해 알아보겠습니다.
Flutter DataTable
Flutter의 DataTable은 행과 열로 구성된 데이터를 표 형식으로 보여주는 위젯입니다. 헤더와 바디 부분이 하나의 스크롤로 동작하여 함께 스크롤 되는데, 헤더와 바디를 따로 스크롤되도록 변경하는 방법에 대해 이야기해보겠습니다.
헤더와 바디를 따로 스크롤하는 방법
SingleChildScrollView 사용
헤더와 바디를 따로 스크롤하기 위해서 SingleChildScrollView 위젯을 사용할 수 있습니다. SingleChildScrollView 위젯으로 헤더와 바디를 감싸면, 각각의 영역이 별개로 스크롤될 수 있습니다.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
// DataTable의 헤더 부분
columns: [
// 컬럼 추가
],
// 데이터 (바디) 부분
rows: [
// 데이터 추가
],
),
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
// DataTable의 헤더 부분
columns: [
// 컬럼 추가
],
// 데이터 (바디) 부분
rows: [
// 데이터 추가
],
),
),
Custom Scroll View 사용
또 다른 방법으로 CustomScrollView를 사용하여 헤더와 바디를 따로 스크롤하는 것이 가능합니다. CustomScrollView를 사용하면 더욱 유연한 형태로 스크롤을 조작할 수 있습니다.
CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
// DataTable의 헤더 부분
columns: [
// 컬럼 추가
],
// 데이터 (바디) 부분
rows: [
// 데이터 추가
],
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
// DataTable의 헤더 부분
columns: [
// 컬럼 추가
],
// 데이터 (바디) 부분
rows: [
// 데이터 추가
],
),
);
},
childCount: 1, // 바디 부분에 해당하는 데이터 개수
),
),
],
);
마치며
DataTable에서 헤더와 바디를 따로 스크롤하는 방법에 대해 간단히 알아보았습니다. SingleChildScrollView 또는 CustomScrollView를 활용하여 헤더와 바디를 각각 스크롤할 수 있도록 구현할 수 있습니다. 코드 샘플을 참고하여 알맞게 적용해보시기 바랍니다.
참고 링크: