📚 Flutter 위젯 시리즈: Sliver & CustomScrollView 완전 정복

대부분의 Flutter 초보자들은 ListView나 GridView로 스크롤 UI를 충분히 처리할 수 있습니다.
그런데 앱이 복잡해지고 다양한 스크롤 UI를 하나로 합칠 때는 CustomScrollView와 Sliver 위젯이 필요해집니다.

---

✅ 1. Sliver란?

Sliver는 스크롤 가능한 영역의 일부분을 의미합니다.
쉽게 말해, CustomScrollView 안에 들어가는 스크롤 블록 단위라고 생각하면 됩니다.

• SliverAppBar: 스크롤 시 접히는 AppBar
• SliverList: 스크롤 가능한 리스트
• SliverGrid: 스크롤 가능한 그리드
• SliverToBoxAdapter: 일반 위젯과 Sliver 섞기

---

✅ 2. CustomScrollView 기본 구조

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Sliver Demo'),
      ),
      pinned: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text('Item #$index'),
        ),
        childCount: 20,
      ),
    ),
  ],
)

✔️ SliverAppBar와 SliverList를 하나의 스크롤로 자연스럽게 연결!

---

✅ 3. SliverGrid 예시

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(
          color: Colors.amber,
          child: Center(child: Text('Grid Item $index')),
        ),
        childCount: 10,
      ),
    ),
  ],
)

✔️ SliverGrid로 무한 스크롤 격자 UI도 CustomScrollView에 자연스럽게 포함할 수 있습니다.

---

✅ 4. 일반 위젯 섞기: SliverToBoxAdapter

리스트 중간에 광고 배너나 일반 Box를 넣고 싶을 땐 SliverToBoxAdapter를 사용하면 됩니다.

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 5,
      ),
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 150,
        color: Colors.redAccent,
        child: Center(child: Text('광고 배너')),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(
          color: Colors.teal,
          child: Center(child: Text('Grid Item $index')),
        ),
        childCount: 4,
      ),
    ),
  ],
)

✔️ 리스트와 배너, 그리드를 하나의 스크롤 영역으로 자연스럽게!

---

✅ 5. 언제 Sliver를 쓸까?

• 스크롤 가능한 AppBar 만들기
• 리스트와 그리드 섞기
• 스크롤에 따라 레이아웃이 변하는 고급 UI

✔️ CustomScrollView로 다양한 Sliver 조합 → 하나의 스크롤 영역!

---

📌 다음 편 예고

• 👉 위젯 시리즈: Flutter Hero 애니메이션과 전환 효과