플러터에서 스크롤 가능한 테이블뷰를 만들 때, 때로는 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를 조합하여 테이블의 내용과 고정 헤더를 표시할 수 있습니다. 이를 통해 효과적인 스크롤 가능한 테이블뷰를 만들 수 있습니다.

참고 자료

• Flutter Documentation
• SliverAppBar class
• SliverList class