슬리버 (Sliver)

슬리버(Sliver) 위젯은 Flutter에서 스크롤 가능한 컨텐츠를 구성하는 데 사용되며, 다양한 레이아웃을 생성할 수 있는 강력한 도구 중 하나입니다.

SliverAppBarDelegate

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

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

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

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

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

SliverFixedExtentList

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

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

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

SliverGrid with SliverChildBuilderDelegate

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

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를 사용하면 그리드 형태의 슬리버를 동적으로 생성할 수 있으며, 아이템 빌더 함수를 통해 아이템을 생성할 수 있습니다.

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