Flutter CustomScrollView로 복잡한 스크롤 레이아웃을 쉽게 구현하기

728x90

오늘은 CustomScrollView로 복잡한 스크롤 동작을 만들어보려고 합니다. 구체적으로, 이 글에서는 CustomScrollView가 무엇인지, 왜 유용한지, 어떻게 사용할 수 있는지에 대해 알아보겠습니다.

1. CustomScrollView란?

CustomScrollView는 Flutter에서 스크롤 가능한 여러 위젯을 결합해 복잡한 레이아웃을 구성할 수 있게 해주는 위젯입니다. 일반적인 스크롤 방식은 ListView나 GridView를 통해 쉽게 구현할 수 있지만, CustomScrollView는 이러한 기본적인 스크롤을 넘어, 다양한 위젯을 함께 사용할 수 있는 유연성을 제공합니다.

CustomScrollView는 여러 Sliver 위젯들을 사용하여 스크롤 콘텐츠를 구성합니다. Sliver는 스크롤 가능한 영역을 정의하는 Flutter의 추상화 개념으로, 다양한 스크롤 패턴을 제공하는 여러 Sliver 위젯들이 있습니다.

2. CustomScrollView의 주요 속성

CustomScrollView는 주로 다음과 같은 속성들을 통해 구성됩니다:

slivers: 스크롤 가능한 영역을 구성하는 Sliver 위젯들의 리스트입니다. 각 Sliver는 스크롤되는 콘텐츠의 일부로서, 이 속성은 필수적으로 지정해야 합니다.
scrollDirection: 스크롤이 수직으로 이루어질지, 수평으로 이루어질지를 결정하는 속성입니다. 기본값은 수직 스크롤(Axis.vertical)이며, 수평 스크롤의 경우 Axis.horizontal로 설정할 수 있습니다.
reverse: true로 설정할 경우 스크롤의 방향을 반대로 뒤집습니다. 즉, 스크롤이 아래에서 위로 혹은 오른쪽에서 왼쪽으로 이루어지게 됩니다.

3. CustomScrollView 사용 예시

CustomScrollView의 기본적인 사용법을 간단한 코드로 살펴보겠습니다. 여기서는 SliverAppBar, SliverList, SliverGrid를 함께 사용하여 상단에 고정된 앱바와 스크롤 가능한 리스트와 그리드를 구현하는 예제를 보여줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('CustomScrollView Example'),
                background: Image.network(
                  'https://via.placeholder.com/200',
                  fit: BoxFit.cover,
                ),
              ),
              floating: true,
              snap: true,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('List Item $index'),
                  );
                },
                childCount: 10, // 리스트 아이템 개수
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 1.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: Colors.blue,
                    child: Center(
                      child: Text('Grid Item $index'),
                    ),
                  );
                },
                childCount: 6, // 그리드 아이템 개수
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드에서는 SliverAppBar, SliverList, SliverGrid를 하나의 CustomScrollView 안에서 결합하여 복잡한 스크롤 레이아웃을 구성하고 있습니다.

SliverAppBar: 스크롤 시에 축소되거나 확장되는 앱바입니다.
SliverList: 스크롤 가능한 리스트 아이템을 표시합니다.
SliverGrid: 여러 열로 구성된 그리드 레이아웃을 구현합니다.

이 코드를 실행하면, 스크롤할 때 앱바가 축소되면서 리스트와 그리드가 자연스럽게 화면에 나타나는 인터페이스를 볼 수 있습니다.

4. Sliver 위젯의 종류

CustomScrollView에서 사용할 수 있는 Sliver 위젯은 여러 가지가 있습니다. 각 위젯의 특성을 잘 이해하고 적절하게 사용하는 것이 중요합니다.

1) SliverAppBar

스크롤 시 상단에 고정되거나 사라지는 앱바를 구현할 수 있는 위젯입니다. 확장되는 앱바, 스크롤에 따라 변하는 앱바 등 다양한 방식으로 커스터마이징할 수 있습니다.

2) SliverList

리스트 형태로 스크롤 가능한 영역을 구현하는 위젯입니다. 일반적인 ListView와 유사하지만, CustomScrollView 내부에서 사용될 수 있습니다.

3) SliverGrid

그리드 형태로 스크롤 가능한 레이아웃을 구현할 때 사용하는 위젯입니다. 여러 열에 걸쳐 아이템을 배치할 수 있으며, 다양한 레이아웃 옵션을 제공합니다.

4) SliverToBoxAdapter

다른 위젯을 Sliver 형태로 감싸서 CustomScrollView 내에서 사용할 수 있도록 해주는 위젯입니다. 예를 들어, 일반적인 Container나 Text 같은 위젯을 CustomScrollView에 추가하려면 이 위젯을 사용해야 합니다.

5) SliverFixedExtentList

리스트 아이템의 크기가 고정된 리스트를 만들 때 사용하는 위젯입니다. SliverList와는 달리 아이템의 높이를 고정할 수 있습니다.

5. CustomScrollView의 장점

1) 복잡한 레이아웃 구현 가능

CustomScrollView는 여러 가지 스크롤 가능한 콘텐츠를 하나의 스크롤 뷰 안에서 결합할 수 있기 때문에, 상단에 고정된 요소, 동적인 리스트, 그리드 등을 자유롭게 조합할 수 있습니다. 앱 화면을 더 유연하게 디자인할 수 있다는 것이 큰 장점입니다.

2) 고급 스크롤 동작 지원

일반적인 ListView나 GridView로 구현하기 어려운 고급 스크롤 동작을 Sliver 위젯들을 조합해 쉽게 만들 수 있습니다. 특히 스크롤 이벤트에 따라 특정 요소가 동적으로 변하는 UI를 구현할 때 매우 유용합니다.

3) 확장성과 유연성

CustomScrollView는 여러 Sliver 위젯을 통해 확장성과 유연성을 제공합니다. 이는 다양한 화면 크기와 형태에서 반응형 UI를 구현할 수 있도록 도와줍니다.

6. CustomScrollView의 단점

1) 복잡한 구조

CustomScrollView는 강력한 도구이지만, 단순한 스크롤 레이아웃을 구현할 때는 ListView나 GridView와 비교해 다소 복잡할 수 있습니다. 특히 Sliver 위젯에 대한 이해가 부족할 경우, 코드가 다소 난해해질 수 있습니다.

2) 메모리 관리

여러 개의 Sliver 위젯을 결합하여 큰 스크롤 뷰를 만들 때는 메모리 사용량에 유의해야 합니다. 많은 양의 데이터나 복잡한 UI 요소를 한 번에 렌더링할 경우 성능 문제가 발생할 수 있습니다.

7. CustomScrollView와 ListView의 차이점

ListView와 CustomScrollView의 가장 큰 차이점은 유연성에 있습니다. ListView는 기본적인 리스트 스크롤을 매우 간단하게 구현할 수 있지만, 그 이상의 복잡한 스크롤 레이아웃을 만들기는 어렵습니다. 반면에 CustomScrollView는 여러 Sliver 위젯을 조합해 다양한 스크롤 패턴을 구현할 수 있다는 점에서 차별화됩니다.

ListView: 단일 리스트 형태의 간단한 스크롤을 구현할 때 적합.
CustomScrollView: 여러 개의 스크롤 가능한 요소들을 결합한 복잡한 레이아웃을 구현할 때 적합.

8. 결론

Flutter에서 CustomScrollView는 복잡한 스크롤 레이아웃을 구현할 때 필수적인 도구입니다. 여러 Sliver 위젯을 조합하여 고급 UI를 만들 수 있으며, 확장성과 유연성 덕분에 다양한 레이아웃을 손쉽게 구성할 수 있습니다. 이번 글을 참고하셔서 복잡한 스크롤 레이아웃을 쉽게 구현하실 수 있었으면 좋겠습니다.