# 슬리버 (Sliver)

## SliverAppBarDelegate

SliverAppBarDelegate는 슬리버의 앱바 부분 스타일을 지정하는 함수입니다. 앱바를 스크롤할 때 최소 및 최대 높이와 함께 사용자 정의 앱바를 만들 수 있습니다.

```dart
SliverAppBarDelegate(
  minHeight: 50.0,
  maxHeight: 100.0,
  child: Container(
    color: Colors.white,
    child: Center(
      child: Text(
        headerText,
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
    ),
  ),
);
```

위와 같이 SliverAppBarDelegate를 사용하면 앱바의 스타일을 지정하고 고정(pinned) 여부를 설정할 수 있습니다.

## Sliver Grid

![](/files/hthQYqxBaaXNh2STbgPE)

SliverGrid는 그리드 형태의 슬리버 위젯을 구현하는 함수입니다. 여러 개의 그리드 아이템을 나란히 나열할 때 사용됩니다.

```dart
SliverGrid.count(
  crossAxisCount: 3,
  children: [
    // 그리드 아이템들
  ],
);
```

위와 같이 SliverGrid를 사용하면 그리드 레이아웃을 구성할 수 있으며, 각 아이템을 커스터마이즈할 수 있습니다.

## SliverFixedExtentList

![](/files/INzlL9k00D9tHdrd98Ci)

SliverFixedExtentList는 리스트 형태의 슬리버 위젯을 구현하는 함수입니다. 각 리스트 아이템의 높이가 동일하게 유지됩니다.

```dart
SliverFixedExtentList(
  itemExtent: 150.0,
  delegate: SliverChildListDelegate(
    [
      // 리스트 아이템들
    ],
  ),
);
```

SliverFixedExtentList를 사용하면 각 리스트 아이템의 높이를 일정하게 유지하면서 커스텀 리스트를 만들 수 있습니다.

## SliverGrid with SliverChildBuilderDelegate

![](/files/0DmGbxpu3mItfOptxuB8)

SliverGrid와 SliverChildBuilderDelegate를 결합하여 동적인 그리드 레이아웃을 생성할 수 있습니다. 아이템을 빌드하는 데 필요한 정보를 제공할 수 있습니다.

```dart
SliverGrid(
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200.0,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 4.0,
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(
        alignment: Alignment.center,
        color: Colors.cyan[100 * (index % 9)],
        child: Text('item $index'),
      );
    },
    childCount: 102,
  ),
);
```

SliverGrid와 SliverChildBuilderDelegate를 사용하면 그리드 형태의 슬리버를 동적으로 생성할 수 있으며, 아이템 빌더 함수를 통해 아이템을 생성할 수 있습니다.

위에서 소개된 슬리버 위젯은 다양한 스크롤 가능한 레이아웃을 구성하는 데 사용됩니다. 필요에 따라 슬리버 위젯을 활용하여 다양한 스크롤 레이아웃을 구성해보세요.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/sliver.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.