[Flutter] Flutter에서 다양한 스크롤뷰 사용하기

Column & SingleChildScrollView

Column과 SingleChildScrollView를 사용하면 단순한 형태의 스크롤뷰를 구현할 수 있습니다. 

SingleChildScrollView(
  child: Column(
    children: [
      Container(),
      Container(),
      Container(),
    ],
  ),
);

 

장점

1. 구현이 간단하고 이해하기 쉽다.
2. 적은 양의 데이터일 경우 보이지 않는 영역도 미리 렌더링을 해서 렌더링에서 딜레이가 없다.

단점

1. 여러 형태의 사용자 정의 스크롤과 스크롤 효과를 만들기 쉽지 않다. (ScrollController를 이용해서 직접 개발해야 할 것)
2. 데이터양이 많고 복잡하고 비용이 큰 UI를 불러오는 경우 짧은 순간 Jank가 걸릴 수 있다.

 

 

SliverList

CustomScrollView와 SliverList를 사용하여 스크롤뷰를 구현할 수도 있습니다.

CustomScrollView(
  slivers: [
    SliverList.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return Container(
          width: 10,
          height: 50,
          decoration: BoxDecoration(
              border: Border.all(
            color: Colors.black,
          )),
        );
      },
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        childCount: 10,
        (context, index) {
          return Container(
            width: 10,
            height: 50,
            decoration: BoxDecoration(
                border: Border.all(
              color: Colors.blue,
            )),
          );
        },
      ),
    )
  ],
);

CustomScrollView: 여러가지 스크롤 효과와 다양한 형태의 아이템을 이용해서 커스텀한 스크롤뷰를 만들고 싶을 때 사용합니다 (SliverAppBar를 이용해서 pinning이 되는 앱바를 만들고 싶을 때 등). 이 때 아이템으로써 Sliver 위젯들이 들어가게 됩니다. 이 때 slivers의 아이템 리스트는 반드시 Sliver 위젯이어야 합니다.

SliverList: 적은 양의 아이템을 그릴 때 사용하는 것을 권장합니다. 아이템을 모두 미리 렌더링합니다.

SliverList.builder: 많은 양의 아이템을 그릴 때 사용하는 것을 권장합니다. 현재 화면 상 보여지는 아이템만 렌더링합니다.

 

위와 같이 CustomScrollView에 SliverList, SliverList.builder를 사용하여 여러 아이템을 CustomScrollView에서 나열하고자 할 때 사용할 수도 있고, SliverPadding 같은 위젯을 사용해서 용도에 맞게 사용할 수 있습니다.

그 밖에도 SliverList.list나 SliverList.seperated 등 여러 위젯이 존재합니다. Sliver의 종류가 너무 많으니 공식 문서에서 참고하는 것이 좋을 것 같습니다.

Using slivers to achieve fancy scrolling

 

 

 

ListView

사실 상 SliverList와 ListView 형제들은 차이가 없습니다. ListView 자체가 내부적으로 Sliver를 사용하여 만든 위젯이므로 같은 것이라고 볼 수 있겠습니다. 굳이 따지자면 Sliver는 Sliver를 받을 수 있는 부모 위젯 내에서 사용해야하고 (ex. CustomScrollView), ListView는 RenderObject 밑에서 바로 사용할 수 있습니다.

return ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: 10,
      height: 50,
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.black,
      )),
    );
  },
);

return ListView(
  children: [
    Container(),
    Container(),
    Container(),
  ],
);

 

ListView.builder는 itemBuilder로써 만들어주면 되고, ListView는 Widget 리스트를 넣어주면 됩니다.

 

 

요약

1. Column은 간단한 스크롤뷰를 만들고 싶을 때, 적은 양의 데이터를 사용하고 싶을 때 사용하면 됩니다.
2. CustomScrollView는 스크롤 이펙트와 다양한 형태의 아이템을 만들고 싶을 때 사용하며, sliver와 같이 사용합니다. SliverAppBar와 같이 pinning이 되는 등 여러 형태의 효과를 쉽게 만들 수 있습니다.
3. ListView는 사실 상 Sliver와 같은 개념의 위젯이며, CustomScrollView를 사용하지 않는 스크롤뷰일 때 사용하곤 합니다. 특별한 이펙트를 사용하지 않거나 직접 구현할 수 있을 때 사용해도 됩니다.