[Flutter] Sliver 위젯

Sliver 위젯이란

A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling.

슬라이버는 특별한 방식으로 작동하도록 정의할 수 있는 스크롤 가능한 영역의 일부입니다. 슬라이버를 사용하여 탄력적 스크롤과 같은 사용자 지정 스크롤 효과를 얻을 수 있습니다.

flutter - Using Slivers to achieve fancy scrolling

SliverAppBar

 SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Sliver Demo'),
              background: Image.network(
                'https://picsum.photos/600/600',
                fit: BoxFit.cover,
              ),
            ),
          ),

• 기본적으로 AppBar와 같은 방식으로 작동
• flexibleSpace, expandedHeight 등으로 AppBar 영역 커스텀 가능함.

SliverPersistentHeader

 SliverPersistentHeader(
            pinned: true,
            delegate: _SliverAppBarDelegate(
              minHeight: 60.0,
              maxHeight: 60.0,
              child: Container(
                color: Colors.lightBlue,
                alignment: Alignment.centerLeft,
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: const Text(
                  '고정 헤더',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                  ),
                ),
              ),
            ),
          ),

• Header를 고정할 수 있다.
• _SliverAppBarDelegate를 활용해서, 헤더의 최소, 최대 높이를 설정하고 자식 위젯을 배치한다.

SliverGrid

SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 1.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color
: Colors.teal[100 * ((index % 8) + 1)],
                    child: Text('그리드 아이템 ${index + 1}'),
                  );
                },
                childCount: 12,
              ),
            ),
          ),

• 그리드 레이아웃을 생성할 수 있다.
• SliverGridDelegateWithMaxCrossAxisExtent를 사용하여 그리드의 각 아이템이 가질 수 있는 최대 가로 길이를 설정할 수 있다.

SliverList

SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  leading: CircleAvatar(
                    backgroundColor: Colors.blue,
                    child: Text('${index + 1}'),
                  ),

                  title: Text('리스트 아이템 ${index + 1}'),
                );
              },
              childCount: 20,
            ),
          ),

• 리스트 레이아웃을 생성한다.
• SliverChildBuilderDelegate를 사용하여 동적으로 리스트 아이템을 빌드할 수 있다.

SliverFillRemaining

SliverFillRemaining(
            hasScrollBody: false,
            child: Container(
              color: Colors.grey[200],
              alignment: Alignment.center,
              child: const Text(
                '모든 콘텐츠가 표시되었습니다.',
                style: TextStyle(fontSize: 18.0),
              ),
            ),
          ),

• 나머지 공간을 채우는 위젯을 생성한다.
• 스크롤이 끝난 후 남은 공간에 메시지를 표시할 수 있다.

delegated란?

1. Delegate의 역할
   자식 위젯의 생성과 관리:

• delegate는 슬리버가 스크롤할 때 필요한 자식 위젯을 생성하고 제거하는 방법을 정의.
  예를 들어, SliverList나 SliverGrid는 delegate를 사용하여 리스트나 그리드의 각 항목을 빌드합니다.

2. 효율적인 렌더링:

• delegate는 필요한 시점에만 위젯을 빌드하여 메모리와 성능을 최적화합니다.

구현 예제

https://github.com/ds-k/sliver_sample.git