Flutter SliverAppBar 위젯으로 유연한 스크롤 애니메이션 구현하기

728x90

들어가기 전에

모던한 앱 인터페이스에서 앱바(AppBar)는 상단에 고정된 중요한 UI 요소 중 하나입니다. 그러나 사용자가 화면을 스크롤할 때 앱바가 더 유연하게 동작한다면, 더 나은 사용자 경험을 제공할 수 있습니다. 이런 기능을 제공하는 Flutter 위젯이 바로 SliverAppBar입니다. SliverAppBar는 스크롤 동작에 반응해 앱바의 크기가 변화하거나 화면에서 사라지게 만들 수 있는 위젯입니다. 이번 포스팅에서는 SliverAppBar의 기본 사용법부터 고급 설정까지 자세히 다루겠습니다.

1. SliverAppBar란 무엇인가?

SliverAppBar는 일반적인 AppBar보다 더 유연한 동작을 제공합니다. 스크롤할 때 자동으로 축소되거나, 숨겨지며, 다시 상단으로 돌아오면 재등장하는 방식으로 동작합니다. 특히 리스트뷰나 그리드뷰와 같은 스크롤 가능한 콘텐츠와 함께 사용될 때 매우 유용합니다.

2. SliverAppBar의 기본 구조

SliverAppBar는 CustomScrollView 내에서 다른 Sliver들과 함께 사용됩니다. CustomScrollView는 스크롤 가능한 다양한 위젯들을 배치할 수 있는 컨테이너이며, 여기서 SliverAppBar와 SliverList, SliverGrid 등의 위젯을 함께 사용할 수 있습니다.

아래는 SliverAppBar의 기본적인 사용 예시입니다.

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('SliverAppBar Example'),
          background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(
            title: Text('Item #$index'),
          ),
          childCount: 20,
        ),
      ),
    ],
  ),
);

위 예시에서 SliverAppBar는 스크롤에 따라 확장되거나 축소되는 동작을 하며, 하단에 있는 SliverList가 스크롤되면 SliverAppBar가 점차 사라집니다.

3. 주요 속성 살펴보기

SliverAppBar는 다양한 속성을 통해 유연한 설정이 가능합니다. 이 중 자주 사용하는 속성들을 살펴보겠습니다.

expandedHeight: 앱바가 확장될 때의 최대 높이를 설정합니다. 일반적으로 배경 이미지나 추가 UI 요소를 표시할 때 이 속성을 사용합니다.
floating: floating 속성이 true이면, 스크롤이 위로 당겨질 때 앱바가 바로 화면에 다시 나타납니다. 즉, 리스트가 위로 스크롤되는 즉시 SliverAppBar가 다시 보이게 되는 것입니다.

SliverAppBar(
  floating: true,
  // 기타 속성들
)

pinned: pinned 속성이 true이면, SliverAppBar가 화면 상단에 고정되어 스크롤이 끝까지 내려가도 사라지지 않고 남아 있습니다. 주로 앱바의 제목이 항상 표시되길 원할 때 유용합니다.

SliverAppBar(
  pinned: true,
  // 기타 속성들
)

snap: snap 속성은 floating이 true일 때만 사용할 수 있으며, 사용자가 스크롤을 멈추면 앱바가 자동으로 화면에 스냅됩니다. 이로 인해 더 부드러운 사용자 경험을 제공할 수 있습니다.

SliverAppBar(
  floating: true,
  snap: true,
  // 기타 속성들
)

flexibleSpace: 앱바의 배경이나 확장되는 공간을 정의하는 속성으로, FlexibleSpaceBar를 자주 사용합니다. FlexibleSpaceBar는 배경 이미지나 텍스트를 앱바 확장에 맞게 동적으로 보여줍니다.

SliverAppBar(
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Flexible Space Title'),
    background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
  ),
  // 기타 속성들
)

4. SliverAppBar를 활용한 유연한 UI 구현

SliverAppBar는 스크롤에 따른 다양한 변화를 통해 유연한 UI를 제공합니다. 예를 들어, 사용자에게 더 많은 콘텐츠를 보여주기 위해 스크롤할 때 SliverAppBar를 자동으로 축소시킬 수 있습니다. 아래는 이런 효과를 극대화한 예시입니다.

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 250.0,
        floating: false,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text('SliverAppBar Title'),
          background: Image.network(
            'https://example.com/banner.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
          // 추가 아이템들
        ]),
      ),
    ],
  ),
);

위 코드에서는 pinned 속성을 true로 설정하여, SliverAppBar가 상단에 고정되고 스크롤 시 축소되지만 사라지지 않도록 했습니다. 또한, flexibleSpace에 배경 이미지를 추가하여 앱바가 확장될 때 더욱 역동적인 효과를 줍니다.

5. SliverAppBar와 다른 Sliver 위젯 조합하기

SliverAppBar는 단독으로 사용되기보다 다른 Sliver 위젯과 조합하여 더 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, SliverGrid, SliverFillRemaining 등을 활용해 다양한 UI 패턴을 적용할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Example'),
        background: FlutterLogo(),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: index.isEven ? Colors.blue : Colors.green,
            height: 150.0,
          );
        },
        childCount: 20,
      ),
    ),
  ],
);

이 예제에서는 SliverGrid와 SliverAppBar를 함께 사용해 앱 상단에 유연한 앱바와 함께 그리드를 배치하는 복합적인 레이아웃을 구현했습니다.

결론

Flutter에서 SliverAppBar는 스크롤 동작과 상호작용하는 유연한 UI를 구현하는 데 매우 유용한 도구입니다. 스크롤 시 확장되거나 축소되는 앱바를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다. 이 글에서 살펴본 다양한 속성과 예제를 바탕으로 SliverAppBar를 활용해 앱을 더욱 다채롭게 디자인해보세요.