Scroll View 만들기(1) - SingleChildScrollView

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

이번 글에서는 Scroll View를 만들 수 있는 방법 중 가장 기본적인 방법인 SingleChildScrollView 위젯에 대해 알아보도록 하자.

Scroll View는 개발 중 가장 자주 접하는 기능이면서 디바이스에 보이지 않은 부분을 스크롤을 통해서 볼 수 있도록 구현해주는 뷰이다. 디바이스의 범위를 넘어서면 SafeError라고 해서 검/노 스트라이프의 에러 영역이 디버깅 모드에서 나오게 되는데, 이런 부분에 SingleChildScrollView에 Column 위젯을 사용해야 이러한 에러가 나오지 않고 스크롤이 가능하게 만들 수 있다.

Flutter

SingleChildScrollView는 Flutter의 기본 위젯에 포함되어 있는 뷰이고, 옵션 값으로는 아래의 값들로 넣어줄 수 있다.
자주 사용하는 옵션 값에 대해서 간단하게 살펴보자.

scrollDirection은 스크롤이 되는 방향을 설정하는 값인데, Axis 값을 넣어줄 수 있고 기본 값은 Vertical, 세로 방향이다. 가로 방향으로 하고 싶다면 Horizontal로 해주면 된다.

reverse는 기본 값은 true이고, 반대 방향으로 뷰가 배치되길 원하면 reverse 속성을 true로 해주면 되고, scroll 뷰에 padding 속성으로 padding 값도 넣어줄 수 있다.

physics는 스크롤 뷰의 처음과 끝의 스크롤 부분의 옵션인데, 기본 값은 각 디바이스의 고유 Physics를 따르게 된다. 기본적으로 안드로이드에서는 ClampingScrollPhysics이고, IOS에서는 BouncingScrollPhysics이다. 안드로이드와 다르게 IOS는 뷰 자체가 스크롤이 끝나는 영역에서도 바운싱 모션이 들어가있는데, 해당 옵션이 그런 Physics를 설정해주는 값이다.

child로 Widget을 넣어줄 수 있고 ScollController를 설정해 Scroll과 관련된 부분을 제어할 수도 있다.

primary라는 속성이 있는데, IOS에서는 PrimaryScroll이 있다. 해당 PrimayScroll이 상태바를 터치 했을 때 스크롤이 자동으로 뷰의 가장 최상단으로 위치시켜주는 기능을 말한다.

SingleChildScrollView({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  EdgeInsetsGeometry? padding,
  bool? primary,
  ScrollPhysics? physics,
  ScrollController? controller,
  Widget? child,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  Clip clipBehavior = Clip.hardEdge,
  String? restorationId,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual
})

가장 기본적인 사용법은 아래와 같이 사용하면 된다. 이렇게만 사용하면 수직으로 작동하는 스크롤 뷰가 생성이 된다.

수평으로 작동되는 스크롤 뷰를 만들어 주고 싶다면 Column 대신 Row위젯을 사용하면 되는데, 수평 영역의 높이 값을 정해주지 않으면 에러가 발생한다.

SingleChildScrollView(
		controller : _controller,
        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]),
                        ),
                      ),
                    ))
          ],
        ),
      ),

이렇게 기본적으로 Scroll 뷰를 만드는 데에는 문제가 없지만 위의 예제처럼 반복되는 UI를 SingleChildScrollView로 생성하게 되면 안된다. 가볍게 Scroll 뷰를 생성해서 Column 또는 Row 위젯에 Widget들을 배치 하는 용도로만 사용하고 반복되는 위젯을 사용할 경우에는 캐싱 문제로 ListView를 사용하는 게 더 좋다.

마무리

가장 기본이 되는 Flutter의 Scroll View를 생성하는 방법인 SingleChildScrollView에 대해서 알아보았다. 다음 글에서는 CustomScrollView에 대해서 알아보도록 하자.