[flutter] 플러터 sticky 헤더를 가진 테이블뷰 만들기
플러터에서 스크롤 가능한 테이블뷰를 만들 때, 때로는 sticky(고정) 헤더를 추가하여 테이블의 내용을 스크롤할 때 헤더가 항상 상단에 고정되도록 만들고 싶은 경우가 있습니다. 이러한 효과를 구현하기 위해 sliver
위젯을 사용할 수 있습니다.
스택 구조
플러터에서 sticky 헤더를 가진 테이블뷰를 만들기 위해서는 스택 구조를 구현해야 합니다. 스택 구조는 다음과 같은 sliver 위젯으로 구성됩니다.
SliverAppBar
: sticky 헤더를 표시하는 역할을 합니다.SliverList
: 테이블의 내용을 표시하는 위젯입니다.
예제 코드
다음은 sticky 헤더를 가진 테이블뷰를 만들기 위한 예제 코드입니다.
import 'package:flutter/material.dart';
class StickyHeaderTableView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Sticky Header'),
pinned: true, // 헤더를 상단에 고정할지 여부 설정
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 100, // 테이블의 아이템 수
),
),
],
),
);
}
}
위의 코드에서는 CustomScrollView
안에 SliverAppBar
과 SliverList
를 넣어 sticky 헤더와 테이블의 내용을 구현했습니다.
추가 설정
만약 스크롤 가능한 테이블뷰의 내용을 동적으로 변경하고 싶을 때는 SliverChildBuilderDelegate
대신 SliverChildListDelegate
를 사용하여 children
속성을 설정할 수 있습니다. 이를 통해 테이블의 내용을 동적으로 제어할 수 있습니다.
결론
플러터에서 sticky 헤더를 가진 테이블뷰를 만들기 위해 스택 구조를 사용할 수 있습니다. SliverAppBar
와 SliverList
를 조합하여 테이블의 내용과 고정 헤더를 표시할 수 있습니다. 이를 통해 효과적인 스크롤 가능한 테이블뷰를 만들 수 있습니다.