Flutter Sliver와 CustomScrollView 심화 가이드

Flutter의 Sliver와 CustomScrollView는 스크롤 가능한 영역에서 고급 레이아웃을 구현하는 데 매우 유용한 도구입니다.
이 글에서는 Sliver의 개념과 다양한 Sliver 위젯을 활용하여 고급 레이아웃을 만드는 방법을 다뤄보겠습니다.

---

1. Sliver란?

Sliver는 Flutter에서 "스크롤 가능한" 위젯을 뜻합니다. Sliver는 스크롤 가능한 화면의 한 부분을 정의하며, 스크롤 동작에 따라 크기나 배치를 동적으로 조정할 수 있습니다. 주로 CustomScrollView와 함께 사용됩니다.

---

2. CustomScrollView

CustomScrollView는 여러 Sliver를 조합하여 복잡한 스크롤 가능한 레이아웃을 생성합니다.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Sliver AppBar'),
        background: Image.network(
          'https://example.com/image.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text('Item #$index'),
        ),
        childCount: 50,
      ),
    ),
  ],
)

---

3. 주요 Sliver 위젯

3.1 SliverAppBar

스크롤 가능한 앱바를 만듭니다. 확장, 축소, 고정 등의 동작을 지원합니다.

SliverAppBar(
  floating: true,
  expandedHeight: 200.0,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Sliver AppBar'),
    background: Image.network(
      'https://example.com/image.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

3.2 SliverList

스크롤 가능한 리스트를 구현합니다.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(
      title: Text('Item #$index'),
    ),
    childCount: 20,
  ),
)

3.3 SliverGrid

스크롤 가능한 그리드를 생성합니다.

SliverGrid(
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(
      color: Colors.blue,
      child: Center(child: Text('Item $index')),
    ),
    childCount: 10,
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
)

3.4 SliverFillRemaining

화면의 남은 공간을 채우는 위젯입니다.

SliverFillRemaining(
  child: Center(
    child: Text('End of List'),
  ),
)

---

4. 실습: Sliver를 활용한 복합 레이아웃

아래는 여러 Sliver 위젯을 조합하여 복잡한 레이아웃을 만드는 예제입니다.

import 'package:flutter/material.dart';

class SliverExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver Example'),
              background: Image.network(
                'https://example.com/image.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text('List Item #$index'),
              ),
              childCount: 10,
            ),
          ),
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                margin: EdgeInsets.all(10),
                color: Colors.amber,
                child: Center(
                  child: Text('Grid Item $index'),
                ),
              ),
              childCount: 6,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
          ),
          SliverFillRemaining(
            child: Center(
              child: Text('No More Content'),
            ),
          ),
        ],
      ),
    );
  }
}

---

5. Sliver 활용 팁

1. 성능 최적화: Sliver는 스크롤 가능한 UI의 성능을 향상시키기 위해 설계되었습니다. 큰 목록이나 복잡한 레이아웃에서 Sliver를 사용하는 것이 유리합니다.
2. 위젯 조합: SliverList와 SliverGrid를 함께 사용하여 리스트와 그리드를 혼합할 수 있습니다.
3. FlexibleSpaceBar: SliverAppBar의 FlexibleSpaceBar를 활용하여 스크롤 시 애니메이션 효과를 추가하세요.

---

6. 결론

Sliver와 CustomScrollView는 Flutter에서 스크롤 가능한 고급 레이아웃을 구현하는 데 필수적인 도구입니다.
다양한 Sliver 위젯과 CustomScrollView를 조합하여 더욱 생동감 있는 UI를 만들어 보세요.
다음 글에서는 Sliver의 애니메이션 효과와 동적 데이터 적용에 대해 다뤄보겠습니다.

---

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs/development/ui/advanced/slivers