Scroll View만들기(2) - CustomScrollView

Scroll View 만들기(1) - SingleChildScrollView
Scroll View 만들기(3) - ListView
Scroll View 만들기(4) - GestureDetector + Stack 1편
Scroll View 만들기(5) - GestureDetector + Stack 2편

이번 글에서는 지난 글에서 다룬 SingleChildScrollView에 이어서 CustomScrollView로 Scroll View를 생성하는 방법에 대해서 알아보도록 하자.

SingleChildScrollView와는 다르게 CustomScrollView에서는 sliver라는 위젯을 넣어서 사용해야 한다. sliver의 위젯에는 다양한 위젯들이 존재하고 sliver도 Flutter의 기본 위젯들이다.

Flutter

CustomScrollView의 옵션도 SingleChildScrollView에서 다룬 옵션 값들과 크게 다르지는 않고 거의 비슷하지만 약간 ListView의 속성과 합쳐진 느낌이 있는 뷰이다.

scrollDirection, controller, primay, physics등의 옵션은 거의 모든 Scroll이 가능한 뷰에서는 설정 가능한 옵션들이다.

CustomScrollView만의 차이점이 있다면 slivers라는 옵션이다. slivers는 Column, Row, Stack, ListView 등에 구조와 똑같이 children처럼 위젯들을 넣어주게 되는데, 다른 점은 반드시 Sliver 위젯만 넣어주어야 한다는 점이다.

shrinkWrap 속성은 위젯의 확장 가능한지를 넣어주는 옵션 값이고, ListView, GridView등에 있는 childCount 값도 넣을 수 있다.

CustomScrollView({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  ScrollBehavior? scrollBehavior,
  bool shrinkWrap = false,
  Key? center,
  double anchor = 0.0,
  double? cacheExtent,
  List<Widget> slivers = const <Widget>[],
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
})

CustomScrollView로 간단하게 뷰를 만드는 방법이고 SliverToBoxAdapter 위젯이 바로 sliver 속성을 가지고 있는 위젯으로 아래 코드와 같이 사용하여 뷰를 만들어 주면된다.

CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [
                ...List.generate(
                    1000,
                    (index) => Center(
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 12),
                            child: Text(
                              "index : $index",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.accents[index % 15]),
                            ),
                          ),
                        ))
              ],
            ),
          )
        ],
      ),

Sliver

Sliver 위젯에는 사용 가능한 Sliver 속성 위젯이 많이 제공되는데, Sliver 관련된 위젯을 다루기에는 다뤄야 할 내용이 많아서 따로 글을 작성할 예정이다.

아래에 있는 Sliver 속성 위젯에 대해 간단하게 살펴보자.

먼저 SliverToBoxAdapter 위젯이 아마도 가장 대표적으로 사용되는 sliver일 것이다. child를 넣을 수 있는데, child 부터는 sliver 속성이 오지 않아도 되서 CustomScrollView에서 가장 간편하게 위젯을 넣는 방법이라고 보면된다.

SliverAppBar는 Sliver 구조의 뷰에 앱바를 사용하게 해주는 부분인데, 기본적으로 사용하던 Scaffold의 앱바와는 많은 차이점이 있다.

그리고 Sliver에도 List, Grid 등을 생성해주는 SliverList, SliverFixedExtentList, SliverGrid 위젯이 있다.

Builder형태로 UI를 넣어주는 경우도 있는데, Sliver에도 SliverLayoutBuilder 위젯을 사용하면 된다.

SliverToBoxAdapter(),
SliverList(),
SliverGrid(),
SliverAppBar(),
SliverFillRemaining(),
SliverFillViewport(),
SliverAnimatedList(),
SliverFixedExtentList(),
SliverIgnorePointer(),
SliverVisibility(),
SliverLayoutBuilder(),

마무리

CustomScrollView에는 sliver라는 속성 값을 받아야 하고 Flutter에서 커스텀 된 뷰를 만들어 줄때에 반드시 필요한 스크롤 가능한 뷰여서 다룰 내용이 정말 많은데, 여기서는 다루지 않고 다른 글에서 Sliver와 NestedScrollView 등에 대해서 따로 글을 작성하도록 할 예정이다.