[플러터] 18. Sliver 위젯

1. CustomScrollView

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [ 위젯들 ]        

• sliver를 사용하기 위한 스크롤 뷰

2. SliverAppBar

SliverAppBar(
  title: Text("앱바1"),  
  pinned: false, 
  floating: true,  
  snap: true,

  // 추가 앱바 범위
  expandedHeight: 250,
  flexibleSpace: FlexibleSpaceBar(
    title: Text("플레시블 스페이스"),
    centerTitle: true,
    background: Image.network(
      "https://picsum.photos/200/300",
      fit: BoxFit.cover,
    ),
  ),
)

• pinned: false
• 스크롤을 내리면 앱바가 사라집니다.

• floating: true
• 스크롤을 아래로 내린 상태에서 스크롤을 살짝 위로 올리면 앱바가 나타납니다.
• 스크롤 방향이 바뀔 때 앱바가 표시됩니다.

• snap: true
• floating과 함께 사용됩니다.
• 스크롤이 멈추면 앱바가 빠르게 나타나거나 사라지는 동작을 합니다.
• floating이 true일 때만 사용할 수 있습니다.

• expandedHeight: 250
• 앱바가 확장되었을 때의 높이를 지정

• flexibleSpace:
• FlexibleSpaceBar를 설정하여 확장된 영역에서 더 많은 내용을 표시할 수 있습니다.

• 스크롤 내리면 보이는 화면

3. SliverToBoxAdapter

SliverToBoxAdapter(  
  child: Container(
    color: Colors.red,
    height: 300,
  ),
),

• sliver에는 sliver 위젯만 담을 수 있지만 어댑터를 통해 일반 위젯도 넣을 수 있습니다.

4. SliverList

SliverList(
  delegate: SliverChildBuilderDelegate(
    childCount: 30, // 아이템 개수
    (context, index) {
      return ListTile(title: Text("제목 $index"));
    },
  ),
),

• ListView는 어댑터를 사용하지 않고 SliverList를 사용합니다.

5. SliverFillViewport

SliverFillViewport(
  delegate: SliverChildBuilderDelegate(
    childCount: 10,
    (context, index) {
      return Card(
        child: Container(
          color: Colors.blue[index % 9 * 100], // index에 따라 색 변화
          child: Text("Viewport"),
        ),
      );
    },
  ),
),

• 각 항목이 뷰포트의 높이를 완전히 채우도록 하는 위젯입니다.

• delegate를 통해 builder를 사용합니다.

6. SliverFillRemaining

SliverFillRemaining(
  child: Container(color: Colors.red),
),

• 스크롤 가능한 영역의 나머지 부분을 채우는 데 사용됩니다.

7. SliverPersistentHeader

// AppBar로 만들면 헷갈리니까 상단에 고정되는 AppBar 기능을 하는 위젯을 만든 것
SliverPersistentHeader(
  pinned: true, // 노랑 container가 스크롤 내려도 상단에 고정, 고정되는 사이즈는 minHeight
  delegate: MySliverPersistentHeaderDelegate(
    minHeight: 50,
    maxHeight: 120,
    child: Container(
      color: Colors.yellow,
    ),
  ),
),

• 스크롤 가능한 영역에 고정된 헤더를 만들 때 사용하는 위젯입니다.

• delegate:
• SliverPersistentHeaderDelegate 는 추상 클래스라 이를 상속하는 MySliverPersistentHeaderDelegate 를 따로 만들어야 합니다.

• minHeight
• 헤더가 스크롤 시 최소 높이를 지정합니다.

• maxHeight
• 헤더의 최대 높이를 지정합니다.

 

// SliverPersistentHeaderDelegate 추상클래스라 extends한 class 작성
class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  MySliverPersistentHeaderDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  // getter
  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;

  @override
  bool shouldRebuild(covariant MySliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}