📚 Flutter 위젯 시리즈: Sliver & CustomScrollView 쉽게 쓰기

플러터로 스크롤 성능과 고급 레이아웃을 잡고 싶다면 꼭 알아야 할 것!
바로 Sliver와 CustomScrollView입니다.

---

✅ 1. Sliver란?

Sliver는 스크롤이 가능한 영역에서 특정 위젯이
어떻게 표시될지 정의하는 유연한 블록입니다.
ListView나 GridView도 내부적으로 Sliver를 사용합니다.

---

✅ 2. CustomScrollView란?

CustomScrollView는 여러 Sliver를 조합해
스크롤 가능한 복잡한 화면을 만들 때 사용됩니다.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('SliverAppBar'),
        background: Image.network(
          'https://picsum.photos/600/300',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            leading: Icon(Icons.star),
            title: Text('아이템 \$index'),
          );
        },
        childCount: 20,
      ),
    ),
  ],
);

✔️ CustomScrollView 안에 SliverAppBar + SliverList를 조합한 예시입니다.

---

✅ 3. 자주 쓰는 Sliver 종류

• SliverAppBar : 스크롤에 따라 AppBar가 작아지거나 고정
• SliverList : 스크롤 가능한 리스트
• SliverGrid : 그리드 형태로 스크롤
• SliverToBoxAdapter : 일반 위젯 삽입 시

---

✅ SliverAppBar 옵션

• pinned: 상단에 고정 여부
• floating: 스크롤 시 바로 나타남
• flexibleSpace: 배경 이미지/레이아웃 지정

---

✅ SliverToBoxAdapter 예시

Sliver 안에 일반 Container 등 위젯을 넣고 싶다면?

SliverToBoxAdapter(
  child: Container(
    height: 100,
    color: Colors.amber,
    child: Center(child: Text('일반 위젯 영역')),
  ),
)

✔️ SliverToBoxAdapter로 일반 위젯도 자유롭게 추가 가능!

---

✅ 언제 쓰면 좋을까?

• ✔️ AppBar가 스크롤에 따라 사라지거나 고정될 때
• ✔️ 리스트 + 그리드 + 배너 등 복잡한 스크롤 UI
• ✔️ 성능 최적화가 필요한 대용량 리스트 화면

---

📌 다음 편 예고

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