Flutter 튜토리얼 9편: 스크롤링과 Sliver

요약#

핵심 요지#

문제 정의: 기본 스크롤 위젯으로는 앱 바 축소, 패럴랙스 효과 등 고급 스크롤 경험을 구현하기 어렵다.
핵심 주장: Flutter의 Sliver¹ 시스템은 스크롤 영역을 세밀하게 제어해서 복잡한 스크롤 효과를 구현할 수 있다.
주요 근거: CustomScrollView²로 여러 Sliver를 조합하고, SliverAppBar³로 축소되는 앱 바를, SliverList/SliverGrid로 효율적인 리스트를 만든다.
실무 기준: 단순 스크롤은 ListView를 사용하고, 여러 스크롤 요소를 조합하거나 커스텀 효과가 필요하면 Sliver를 사용한다.
한계: Sliver는 학습 곡선이 있고, 단순한 경우에는 오히려 복잡도만 높인다.

문서가 설명하는 범위#

기본 스크롤 위젯과 고급 스크롤의 차이
Sliver의 개념과 CustomScrollView 사용법
SliverAppBar로 플로팅 앱 바 만들기
SliverList와 SliverGrid 활용
패럴랙스 스크롤 효과 구현

읽는 시간: 18분 | 난이도: 중급

참고 자료#

Scrolling - 스크롤 위젯 개요
Using slivers to achieve fancy scrolling - Sliver 시스템 설명
Place a floating app bar above a list - 플로팅 앱 바 구현
Create a scrolling parallax effect - 패럴랙스 효과 구현

문제 상황#

앱을 만들다 보면 단순히 콘텐츠를 스크롤하는 것 이상의 경험이 필요해집니다.
앱 바가 스크롤에 따라 축소되거나, 배경 이미지가 다른 속도로 움직이는 패럴랙스 효과가 대표적입니다.

기본 스크롤 위젯의 한계#

1
// 기본 ListView로는 앱 바 축소 효과를 구현할 수 없다
2
Scaffold(
3
  appBar: AppBar(title: Text('고정된 앱 바')),
4
  body: ListView.builder(
5
    itemCount: 100,
6
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
7
  ),
8
)

문제는 다음과 같습니다.

앱 바와 리스트가 독립적이라서 연동된 스크롤 효과를 만들 수 없다.
리스트와 그리드를 하나의 스크롤 뷰에서 섞어 쓰기 어렵다.
shrinkWrap: true⁴를 사용한 중첩 스크롤은 성능이 크게 저하된다.
탄성 스크롤, 패럴랙스 같은 고급 효과는 기본 위젯으로 불가능하다.

해결 방법#

Flutter의 Sliver 시스템은 스크롤 가능한 영역을 조각(sliver)으로 나눠서 각각 다른 동작을 정의할 수 있게 합니다.

챕터 1: 스크롤 위젯 이해하기#

Why#

NOTE
Flutter는 다양한 스크롤 상황에 맞는 위젯을 제공합니다.
상황에 맞는 위젯을 선택해야 성능과 사용자 경험 모두를 잡을 수 있습니다.
1
단순 스크롤 → SingleChildScrollView, ListView
2
복잡한 스크롤 → CustomScrollView + Sliver

What#

NOTE
Flutter의 스크롤 위젯은 용도에 따라 구분됩니다.

위젯 용도
SingleChildScrollView 단일 자식을 스크롤
ListView 세로 리스트
GridView 그리드 레이아웃
CustomScrollView 여러 Sliver 조합
DraggableScrollableSheet 드래그 가능한 시트
ListWheelScrollView 휠 스타일 스크롤

위젯	용도
`SingleChildScrollView`	단일 자식을 스크롤
`ListView`	세로 리스트
`GridView`	그리드 레이아웃
`CustomScrollView`	여러 Sliver 조합
`DraggableScrollableSheet`	드래그 가능한 시트
`ListWheelScrollView`	휠 스타일 스크롤

How#

TIP
기본 스크롤 위젯 선택 기준
graph TD A[스크롤이 필요한가?] -->|예| B{콘텐츠 유형} B -->|단일 위젯| C[SingleChildScrollView] B -->|동일 항목 반복| D{레이아웃} B -->|혼합 요소| E[CustomScrollView] D -->|세로 리스트| F[ListView] D -->|그리드| G[GridView] E --> H[Sliver 조합]
무한 스크롤에는 builder 사용
1
// 좋음: 필요한 항목만 생성
2
ListView.builder(
3
  itemCount: items.length,
4
  itemBuilder: (context, index) => ItemWidget(items[index]),
5
)
6

7
// 나쁨: 모든 항목을 한 번에 생성
8
ListView(
9
  children: items.map((item) => ItemWidget(item)).toList(),
10
)

Watch out#

WARNING
중첩 스크롤에서 shrinkWrap: true를 사용하면 모든 자식을 한 번에 빌드해서 성능이 크게 저하됩니다.
대신 Sliver를 사용해야 합니다.
1
// 나쁨: shrinkWrap은 성능 문제를 일으킨다
2
ListView(
3
  shrinkWrap: true,
4
  children: [...],
5
)
6

7
// 좋음: CustomScrollView와 SliverList 사용
8
CustomScrollView(
9
  slivers: [
10
    SliverList(...),
11
  ],
12
)

결론: 단순 스크롤은 기본 위젯을, 복잡한 스크롤은 Sliver를 사용합니다.

챕터 2: Sliver 시스템 이해하기#

Why#

NOTE
Sliver는 “스크롤 가능한 영역의 조각”입니다.
여러 Sliver를 조합해서 앱 바, 리스트, 그리드가 하나의 스크롤 뷰에서 자연스럽게 연동되는 경험을 만들 수 있습니다.
1
CustomScrollView = SliverAppBar + SliverList + SliverGrid + ...

What#

NOTE
주요 Sliver 위젯입니다.

Sliver 역할
SliverAppBar 스크롤에 연동되는 앱 바
SliverList Sliver 버전의 리스트
SliverGrid Sliver 버전의 그리드
SliverToBoxAdapter 일반 위젯을 Sliver로 변환
SliverPersistentHeader 고정/축소되는 헤더
SliverFillRemaining 남은 공간을 채우는 Sliver

Sliver	역할
`SliverAppBar`	스크롤에 연동되는 앱 바
`SliverList`	Sliver 버전의 리스트
`SliverGrid`	Sliver 버전의 그리드
`SliverToBoxAdapter`	일반 위젯을 Sliver로 변환
`SliverPersistentHeader`	고정/축소되는 헤더
`SliverFillRemaining`	남은 공간을 채우는 Sliver

How#

TIP
CustomScrollView 기본 구조
1
CustomScrollView(
2
  slivers: <Widget>[
3
    // 1. 앱 바 영역
4
    SliverAppBar(
5
      title: Text('제목'),
6
      expandedHeight: 200,
7
    ),
8
    // 2. 일반 위젯 (Sliver로 변환)
9
    SliverToBoxAdapter(
10
      child: Padding(
11
        padding: EdgeInsets.all(16),
12
        child: Text('섹션 헤더'),
13
      ),
14
    ),
15
    // 3. 리스트 영역
16
    SliverList.builder(
17
      itemCount: 20,
18
      itemBuilder: (context, index) => ListTile(
19
        title: Text('항목 $index'),
20
      ),
21
    ),
22
  ],
23
)
일반 위젯 vs Sliver
graph LR subgraph "일반 스크롤" A[Scaffold] --> B[AppBar] A --> C[ListView] end subgraph "Sliver 스크롤" D[CustomScrollView] --> E[SliverAppBar] D --> F[SliverList] D --> G[SliverGrid] end
일반 방식에서는 AppBar와 ListView가 분리되어 있지만, Sliver 방식에서는 모든 요소가 하나의 스크롤 컨텍스트에서 동작합니다.

Watch out#

WARNING

CustomScrollView의 slivers 속성에는 Sliver 위젯만 넣을 수 있습니다.
일반 위젯은 SliverToBoxAdapter로 감싸야 합니다.

1
// 오류: 일반 위젯은 slivers에 직접 넣을 수 없다
2
CustomScrollView(
3
  slivers: [
4
    Container(child: Text('헤더')), // 오류!
5
  ],
6
)
7

8
// 올바른 사용
9
CustomScrollView(
10
  slivers: [
11
    SliverToBoxAdapter(
12
      child: Container(child: Text('헤더')),
13
    ),
14
  ],
15
)

결론: Sliver는 여러 스크롤 요소를 하나의 스크롤 뷰에서 조합할 수 있게 합니다.

챕터 3: SliverAppBar로 플로팅 앱 바 만들기#

Why#

NOTE
사용자가 콘텐츠를 스크롤할 때 앱 바가 축소되거나 사라지면 화면 공간을 더 효율적으로 사용할 수 있습니다.
이런 동작은 SliverAppBar로 구현합니다.
1
스크롤 시작 → 앱 바 축소 → 제목만 남음
2
위로 스크롤 → 앱 바 다시 나타남

What#

NOTE
SliverAppBar는 스크롤에 연동되는 앱 바입니다.
expandedHeight, pinned, floating 속성으로 동작을 제어합니다.

How#

TIP

기본 플로팅 앱 바

1
Scaffold(
2
  body: CustomScrollView(
3
    slivers: [
4
      SliverAppBar(
5
        title: Text('플로팅 앱 바'),
6
        expandedHeight: 200,  // 확장 시 높이
7
        pinned: true,         // 스크롤해도 최소 크기로 유지
8
        flexibleSpace: FlexibleSpaceBar(
9
          background: Image.network(
10
            'https://picsum.photos/800/400',
11
            fit: BoxFit.cover,
12
          ),
13
        ),
14
      ),
15
      SliverList.builder(
16
        itemCount: 50,
17
        itemBuilder: (context, index) => ListTile(
18
          title: Text('항목 $index'),
19
        ),
20
      ),
21
    ],
22
  ),
23
)

SliverAppBar 속성

속성	설명	기본값
`expandedHeight`	확장 시 높이	null
`pinned`	축소 후에도 앱 바 표시	false
`floating`	위로 스크롤 시 즉시 나타남	false
`snap`	floating과 함께 사용, 스냅 효과	false
`flexibleSpace`	확장 영역에 표시할 위젯	null

동작 조합

1
// 1. 고정형: 항상 앱 바 표시
2
SliverAppBar(pinned: true)
3

4
// 2. 플로팅형: 위로 스크롤하면 나타남
5
SliverAppBar(floating: true)
6

7
// 3. 스냅형: 플로팅 + 자동 완성
8
SliverAppBar(floating: true, snap: true)
9

10
// 4. 고정 + 플로팅: 축소 후 고정, 위로 스크롤하면 확장
11
SliverAppBar(pinned: true, floating: true)

Watch out#

WARNING
snap: true는 반드시 floating: true와 함께 사용해야 합니다.
단독으로 사용하면 오류가 발생합니다.
1
// 오류: snap은 floating 없이 사용 불가
2
SliverAppBar(snap: true)  // 오류!
3

4
// 올바른 사용
5
SliverAppBar(floating: true, snap: true)

결론: SliverAppBar로 스크롤에 반응하는 앱 바를 쉽게 구현할 수 있습니다.

챕터 4: SliverList와 SliverGrid 활용하기#

Why#

NOTE
CustomScrollView 안에서 리스트나 그리드를 사용하려면 Sliver 버전을 사용해야 합니다.
SliverList와 SliverGrid는 일반 ListView, GridView와 동일한 성능 최적화를 제공합니다.

What#

NOTE
Sliver 리스트와 그리드의 생성자입니다.

생성자 용도
SliverList() 자식 목록을 직접 전달
SliverList.builder() 항목을 동적으로 생성 (권장)
SliverList.separated() 항목 사이에 구분자 추가
SliverGrid() 그리드 레이아웃
SliverGrid.builder() 그리드 항목을 동적으로 생성
SliverGrid.count() 열 개수 지정 그리드
SliverGrid.extent() 최대 너비 지정 그리드

생성자	용도
`SliverList()`	자식 목록을 직접 전달
`SliverList.builder()`	항목을 동적으로 생성 (권장)
`SliverList.separated()`	항목 사이에 구분자 추가
`SliverGrid()`	그리드 레이아웃
`SliverGrid.builder()`	그리드 항목을 동적으로 생성
`SliverGrid.count()`	열 개수 지정 그리드
`SliverGrid.extent()`	최대 너비 지정 그리드

How#

TIP

SliverList 예제

1
CustomScrollView(
2
  slivers: [
3
    // 구분자가 있는 리스트
4
    SliverList.separated(
5
      itemCount: 20,
6
      itemBuilder: (context, index) => ListTile(
7
        leading: CircleAvatar(child: Text('$index')),
8
        title: Text('항목 $index'),
9
        subtitle: Text('설명 텍스트'),
10
      ),
11
      separatorBuilder: (context, index) => Divider(),
12
    ),
13
  ],
14
)

SliverGrid 예제

1
CustomScrollView(
2
  slivers: [
3
    SliverGrid.count(
4
      crossAxisCount: 2,        // 2열
5
      mainAxisSpacing: 8,       // 세로 간격
6
      crossAxisSpacing: 8,      // 가로 간격
7
      childAspectRatio: 1.5,    // 가로:세로 비율
8
      children: List.generate(20, (index) => Card(
9
        child: Center(child: Text('Grid $index')),
10
      )),
11
    ),
12
  ],
13
)

혼합 레이아웃

1
CustomScrollView(
2
  slivers: [
3
    // 앱 바
4
    SliverAppBar(title: Text('혼합 레이아웃'), pinned: true),
5

6
    // 섹션 헤더
7
    SliverToBoxAdapter(
8
      child: Padding(
9
        padding: EdgeInsets.all(16),
10
        child: Text('추천 항목', style: TextStyle(fontSize: 20)),
11
      ),
12
    ),
13

14
    // 가로 스크롤 (높이 고정)
15
    SliverToBoxAdapter(
16
      child: SizedBox(
17
        height: 120,
18
        child: ListView.builder(
19
          scrollDirection: Axis.horizontal,
20
          itemCount: 10,
21
          itemBuilder: (context, index) => Card(
22
            child: SizedBox(width: 100, child: Center(child: Text('$index'))),
23
          ),
24
        ),
25
      ),
26
    ),
27

28
    // 섹션 헤더
29
    SliverToBoxAdapter(
30
      child: Padding(
31
        padding: EdgeInsets.all(16),
32
        child: Text('전체 항목', style: TextStyle(fontSize: 20)),
33
      ),
34
    ),
35

36
    // 그리드
37
    SliverGrid.count(
38
      crossAxisCount: 3,
39
      children: List.generate(30, (index) => Card(
40
        child: Center(child: Text('$index')),
41
      )),
42
    ),
43
  ],
44
)

Watch out#

WARNING
SliverGrid에서 childAspectRatio를 잘못 설정하면 콘텐츠가 잘리거나 오버플로우가 발생합니다.
내용물의 실제 비율을 고려해서 설정해야 합니다.
1
// 문제: 텍스트가 많은데 정사각형으로 설정
2
SliverGrid.count(
3
  crossAxisCount: 2,
4
  childAspectRatio: 1.0,  // 정사각형 → 텍스트 오버플로우 가능
5
  children: cards,
6
)
7

8
// 해결: 내용에 맞는 비율 설정
9
SliverGrid.count(
10
  crossAxisCount: 2,
11
  childAspectRatio: 0.8,  // 세로로 더 긴 비율
12
  children: cards,
13
)

결론: SliverList와 SliverGrid로 CustomScrollView 안에서 효율적인 리스트와 그리드를 구현합니다.

챕터 5: 패럴랙스 스크롤 효과 구현하기#

Why#

NOTE
패럴랙스(parallax)⁵ 효과는 배경 이미지가 전경보다 느리게 움직여서 깊이감을 주는 기법입니다.
카드 리스트에서 이미지가 카드와 다른 속도로 움직이면 시각적으로 매력적인 경험을 제공합니다.

What#

NOTE
Flutter에서 패럴랙스 효과는 Flow⁶ 위젯과 커스텀 FlowDelegate⁷로 구현합니다.
스크롤 위치에 따라 이미지의 오프셋을 계산해서 다른 속도로 움직이게 합니다.

How#

TIP
패럴랙스 효과의 원리
sequenceDiagram participant S as Scroll Position participant D as FlowDelegate participant I as Image S->>D: 스크롤 위치 변경 D->>D: 뷰포트 내 위치 계산 D->>D: 스크롤 비율 (0.0~1.0) D->>I: 이미지 오프셋 적용 Note over I: 카드보다 느리게 이동
기본 구조
1
class LocationCard extends StatelessWidget {
2
  final String imageUrl;
3
  final String title;
4
  final GlobalKey _backgroundKey = GlobalKey();
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return Padding(
9
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
10
      child: AspectRatio(
11
        aspectRatio: 16 / 9,
12
        child: ClipRRect(
13
          borderRadius: BorderRadius.circular(16),
14
          child: Stack(
15
            children: [
16
              // 패럴랙스 배경
17
              _buildParallaxBackground(context),
18
              // 그라데이션 오버레이
19
              _buildGradient(),
20
              // 제목
21
              _buildTitle(),
22
            ],
23
          ),
24
        ),
25
      ),
26
    );
27
  }
28

29
  Widget _buildParallaxBackground(BuildContext context) {
30
    return Flow(
31
      delegate: ParallaxFlowDelegate(
32
        scrollable: Scrollable.of(context),
33
        listItemContext: context,
34
        backgroundImageKey: _backgroundKey,
35
      ),
36
      children: [
37
        Image.network(
38
          imageUrl,
39
          key: _backgroundKey,
40
          fit: BoxFit.cover,
41
        ),
42
      ],
43
    );
44
  }
45

46
  Widget _buildGradient() {
47
    return Positioned.fill(
48
      child: DecoratedBox(
49
        decoration: BoxDecoration(
50
          gradient: LinearGradient(
51
            colors: [Colors.transparent, Colors.black54],
52
            begin: Alignment.topCenter,
53
            end: Alignment.bottomCenter,
54
            stops: [0.6, 0.95],
55
          ),
56
        ),
57
      ),
58
    );
59
  }
60

61
  Widget _buildTitle() {
62
    return Positioned(
63
      left: 20,
64
      bottom: 20,
65
      child: Text(
66
        title,
67
        style: TextStyle(
68
          color: Colors.white,
69
          fontSize: 20,
70
          fontWeight: FontWeight.bold,
71
        ),
72
      ),
73
    );
74
  }
75
}
FlowDelegate 구현
1
class ParallaxFlowDelegate extends FlowDelegate {
2
  ParallaxFlowDelegate({
3
    required this.scrollable,
4
    required this.listItemContext,
5
    required this.backgroundImageKey,
6
  }) : super(repaint: scrollable.position);
7

8
  final ScrollableState scrollable;
9
  final BuildContext listItemContext;
10
  final GlobalKey backgroundImageKey;
11

12
  @override
13
  BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
14
    return BoxConstraints.tightFor(width: constraints.maxWidth);
15
  }
16

17
  @override
18
  void paintChildren(FlowPaintingContext context) {
19
    // 스크롤 영역과 리스트 항목의 RenderBox 가져오기
20
    final scrollableBox = scrollable.context.findRenderObject() as RenderBox;
21
    final listItemBox = listItemContext.findRenderObject() as RenderBox;
22

23
    // 리스트 항목의 뷰포트 내 위치 계산
24
    final listItemOffset = listItemBox.localToGlobal(
25
      listItemBox.size.centerLeft(Offset.zero),
26
      ancestor: scrollableBox,
27
    );
28

29
    // 스크롤 비율 계산 (0.0 = 상단, 1.0 = 하단)
30
    final viewportDimension = scrollable.position.viewportDimension;
31
    final scrollFraction =
32
        (listItemOffset.dy / viewportDimension).clamp(0.0, 1.0);
33

34
    // 수직 정렬 계산 (-1.0 = 상단, 1.0 = 하단)
35
    final verticalAlignment = Alignment(0.0, scrollFraction * 2 - 1);
36

37
    // 이미지 크기와 오프셋 계산
38
    final backgroundSize =
39
        (backgroundImageKey.currentContext!.findRenderObject() as RenderBox).size;
40
    final listItemSize = context.size;
41
    final childRect = verticalAlignment.inscribe(
42
      backgroundSize,
43
      Offset.zero & listItemSize,
44
    );
45

46
    // 변환 적용하여 이미지 그리기
47
    context.paintChild(
48
      0,
49
      transform: Transform.translate(offset: Offset(0.0, childRect.top)).transform,
50
    );
51
  }
52

53
  @override
54
  bool shouldRepaint(ParallaxFlowDelegate oldDelegate) {
55
    return scrollable != oldDelegate.scrollable ||
56
        listItemContext != oldDelegate.listItemContext ||
57
        backgroundImageKey != oldDelegate.backgroundImageKey;
58
  }
59
}

Watch out#

WARNING
패럴랙스 효과는 매 프레임마다 계산이 필요해서 성능에 영향을 줄 수 있습니다.
이미지 크기를 최적화하고, 화면에 보이는 항목 수를 제한하는 것이 좋습니다.
1
// 성능 최적화: 캐시된 이미지 사용
2
Image.network(
3
  imageUrl,
4
  key: _backgroundKey,
5
  fit: BoxFit.cover,
6
  cacheWidth: 800,  // 캐시 크기 제한
7
)
또한 Flow 위젯은 repaint 매개변수로 스크롤 위치를 전달받아야 실시간으로 업데이트됩니다.
이를 빠뜨리면 이미지가 움직이지 않습니다.

결론: Flow와 FlowDelegate를 활용하면 시각적으로 매력적인 패럴랙스 스크롤 효과를 구현할 수 있습니다.

챕터 6: iOS 스타일 스크롤 구현하기#

Why#

NOTE
iOS 앱에서는 큰 제목이 스크롤하면 작아지는 네비게이션 바 스타일이 일반적입니다.
Flutter의 CupertinoSliverNavigationBar⁸로 이 패턴을 구현할 수 있습니다.

What#

NOTE
Cupertino 디자인 시스템에서 제공하는 Sliver 위젯입니다.

위젯 용도
CupertinoSliverNavigationBar iOS 스타일 네비게이션 바
CupertinoSliverRefreshControl 당겨서 새로고침

위젯	용도
`CupertinoSliverNavigationBar`	iOS 스타일 네비게이션 바
`CupertinoSliverRefreshControl`	당겨서 새로고침

How#

TIP

iOS 스타일 플로팅 네비게이션 바

1
CupertinoApp(
2
  home: CupertinoPageScaffold(
3
    child: CustomScrollView(
4
      slivers: [
5
        CupertinoSliverNavigationBar(
6
          largeTitle: Text('설정'),
7
          // iOS 17+ 스타일의 검색 바
8
          // searchBar: CupertinoSearchTextField(),
9
        ),
10
        SliverList.builder(
11
          itemCount: 50,
12
          itemBuilder: (context, index) => CupertinoListTile(
13
            title: Text('항목 $index'),
14
            trailing: CupertinoListTileChevron(),
15
          ),
16
        ),
17
      ],
18
    ),
19
  ),
20
)

Material vs Cupertino 비교

기능	Material	Cupertino
앱 바	`SliverAppBar`	`CupertinoSliverNavigationBar`
리스트 항목	`ListTile`	`CupertinoListTile`
새로고침	`RefreshIndicator`	`CupertinoSliverRefreshControl`
스크롤 물리	`ClampingScrollPhysics`	`BouncingScrollPhysics`

Watch out#

WARNING
iOS 스타일의 탄성 스크롤(bounce)은 기본적으로 iOS에서만 적용됩니다.
Android에서도 사용하려면 명시적으로 BouncingScrollPhysics를 설정해야 합니다.
1
CustomScrollView(
2
  physics: BouncingScrollPhysics(
3
    parent: AlwaysScrollableScrollPhysics(),
4
  ),
5
  slivers: [...],
6
)

결론: Cupertino Sliver 위젯으로 iOS 네이티브 느낌의 스크롤 경험을 구현할 수 있습니다.

한계#

Sliver 시스템은 강력하지만 모든 상황에 적합하지는 않습니다.

학습 곡선: 일반 위젯과 다른 개념이라 처음에는 이해하기 어렵습니다.
복잡성 증가: 단순한 리스트에 Sliver를 사용하면 오히려 코드가 복잡해집니다.
디버깅 어려움: Sliver 레이아웃 오류는 일반 위젯보다 디버깅이 까다롭습니다.
커스텀 Sliver 구현: 기본 제공 Sliver로 부족한 경우 RenderSliver를 직접 구현해야 하며 난이도가 높습니다.

Sliver(슬리버): 스크롤 가능한 영역의 일부분을 나타내는 위젯으로, CustomScrollView 안에서 사용된다. ↩
CustomScrollView(커스텀스크롤뷰): 여러 Sliver 위젯을 조합해서 커스텀 스크롤 효과를 만드는 위젯이다. ↩
SliverAppBar(슬리버앱바): 스크롤에 연동되어 확장/축소되는 앱 바 위젯이다. ↩
shrinkWrap(쉬링크랩): 스크롤 위젯이 자식의 크기에 맞춰 축소되도록 하는 속성으로, 성능 저하를 일으킬 수 있다. ↩
parallax(패럴랙스): 배경과 전경이 다른 속도로 움직여서 깊이감을 주는 시각 효과다. ↩
Flow(플로우): 자식 위젯의 위치와 변환을 효율적으로 제어하는 위젯이다. ↩
FlowDelegate(플로우델리게이트): Flow 위젯의 자식 위치와 변환을 계산하는 클래스다. ↩
CupertinoSliverNavigationBar(쿠퍼티노슬리버네비게이션바): iOS 스타일의 큰 제목이 있는 네비게이션 바 Sliver 위젯이다. ↩

Flutter 튜토리얼 9편: 스크롤링과 Sliver

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

기본 스크롤 위젯의 한계#

해결 방법#

챕터 1: 스크롤 위젯 이해하기#

Why#

What#

How#

Watch out#

챕터 2: Sliver 시스템 이해하기#

Why#

What#

How#

Watch out#

챕터 3: SliverAppBar로 플로팅 앱 바 만들기#

Why#

What#

How#

Watch out#

챕터 4: SliverList와 SliverGrid 활용하기#

Why#

What#

How#

Watch out#

챕터 5: 패럴랙스 스크롤 효과 구현하기#

Why#

What#

How#

Watch out#

챕터 6: iOS 스타일 스크롤 구현하기#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차