Using Slivers to Achieve Fancy Scrolling in Flutter

01. 서론

1) 슬리버(Sliver)란 무엇인가?

슬리버(Sliver)는 Flutter에서 스크롤 가능한 영역의 일부로 동작하는 위젯을 의미합니다. 슬리버는 스크롤할 수 있는 다양한 형태의 콘텐츠를 만들 수 있으며, 다양한 스크롤 효과를 적용할 수 있는 유연성을 제공합니다. 일반적인 스크롤 위젯과는 달리, 슬리버는 레이아웃이나 콘텐츠를 동적으로 변화시킬 수 있어 더욱 정교한 스크롤 인터페이스를 구현할 수 있습니다.

2) 슬리버를 사용하는 이유

슬리버를 사용하는 주된 이유는 복잡한 스크롤 레이아웃을 쉽게 구현할 수 있기 때문입니다. 예를 들어, 스크롤 시 헤더가 축소되거나 확장되는 효과, 스크롤 위치에 따라 다양한 레이아웃을 동적으로 변경하는 등의 기능을 슬리버를 통해 간편하게 구현할 수 있습니다. 슬리버는 효율적인 메모리 사용을 가능하게 하여 성능 최적화에도 기여합니다.

02. SliverAppBar

1) SliverAppBar의 소개

SliverAppBar는 스크롤할 때 헤더가 축소되거나 확장되는 애니메이션 효과를 제공하는 위젯입니다. 이를 통해 사용자는 인터페이스를 더 직관적이고 시각적으로 매력적으로 만들 수 있습니다. SliverAppBar는 주로 CustomScrollView와 함께 사용되며, 스크롤 시 앱바가 자동으로 축소되거나 확장되는 효과를 제공합니다.

2) SliverAppBar를 사용한 예제 코드


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: [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar 예제'),
                background: Image.network(
                  'https://flutter.dev/images/catalog-widget-placeholder.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드를 실행하면, 사용자는 화면을 스크롤할 때 SliverAppBar가 부드럽게 축소되고, 리스트 항목이 나타나는 것을 볼 수 있습니다. 이 효과는 앱의 사용자 경험을 향상시키고, 시각적으로 매력적인 인터페이스를 제공합니다.

03. SliverList와 SliverGrid

1) SliverList와 SliverGrid의 소개

SliverList와 SliverGrid는 각각 리스트와 그리드를 스크롤 가능한 형태로 배치할 수 있는 슬리버 위젯입니다. SliverList는 수직 방향으로 아이템을 나열하는 리스트를 만들 수 있고, SliverGrid는 격자 형태로 아이템을 배치합니다. 두 위젯 모두 대량의 데이터나 동적 데이터를 효율적으로 표시하는 데 유용합니다.

2) SliverList와 SliverGrid를 사용한 예제 코드

SliverList 예제:


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: [
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverList 예제'),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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: [
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverGrid 예제'),
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: index.isEven ? Colors.blue : Colors.green,
                    child: Center(child: Text('Grid Item $index')),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드를 실행하면, CustomScrollView 내에 SliverAppBar가 위치하며, 그 아래에 SliverList 또는 SliverGrid가 스크롤 가능한 형태로 배치됩니다. 사용자는 스크롤을 통해 리스트 또는 그리드의 모든 항목을 볼 수 있습니다.

04. CustomScrollView

1) CustomScrollView의 소개

CustomScrollView는 여러 슬리버를 조합하여 복잡한 스크롤 레이아웃을 만들 수 있는 위젯입니다. 슬리버를 사용하여 다양한 스크롤 효과를 적용할 수 있으며, 필요한 대로 레이아웃을 구성할 수 있습니다. CustomScrollView는 여러 종류의 슬리버를 포함할 수 있어 유연하고 강력한 스크롤 인터페이스를 제공합니다.

2) 여러 슬리버를 조합한 레이아웃 구현


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: [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: true,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('CustomScrollView 예제'),
                background: Image.network(
                  'https://flutter.dev/images/catalog-widget-placeholder.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('List Item $index'),
                  );
                },
                childCount: 10,
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: index.isEven ? Colors.blue : Colors.green,
                    child: Center(child: Text('Grid Item $index')),
                  );
                },
                childCount: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드를 실행하면, 사용자는 CustomScrollView 내에서 다양한 슬리버 조합을 통해 리스트와 그리드를 스크롤할 수 있습니다. 이는 복잡한 레이아웃을 효율적으로 구성하고, 다양한 스크롤 효과를 제공하는 데 유용합니다.

05. 다양한 스크롤링 효과 구현

1) 탄력적 스크롤링

탄력적 스크롤링(Elastic Scrolling)은 사용자가 리스트의 끝까지 스크롤할 때 탄력적으로 반응하는 효과를 제공합니다. 이는 기본적으로 ListView와 같은 스크롤 가능한 위젯에서 제공됩니다. 이 효과는 자연스럽고 직관적인 사용자 경험을 제공합니다.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Container(height: 100, color: Colors.red),
            Container(height: 100, color: Colors.blue),
            Container(height: 100, color: Colors.green),
            Container(height: 100, color: Colors.yellow),
            Container(height: 100, color: Colors.orange),
          ],
        ),
      ),
    );
  }
}

2) 패럴랙스 스크롤링

패럴랙스 스크롤링(Parallax Scrolling)은 배경 이미지가 콘텐츠보다 느리게 스크롤되는 효과를 제공합니다. 이를 통해 시각적으로 매력적인 UI를 만들 수 있습니다.


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: [
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('패럴랙스 스크롤링'),
                background: Image.network(
                  'https://flutter.dev/images/catalog-widget-placeholder.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}