Flutter에서 Floating App Bar 구현하기: SliverAppBar와 CustomScrollView 활용법

Flutter는 사용자 경험을 극대화하기 위해 스크롤 중에도 유연하게 작동하는 Floating App Bar를 구현할 수 있는 강력한 도구를 제공합니다. 이번 글에서는 CustomScrollView와 SliverAppBar를 사용하여 리스트 위에 떠 있는 앱바를 구현하는 방법을 알아봅니다.

참고. Place a floating app bar above a list

Floating App Bar란?

Floating App Bar는 스크롤 중 사용자가 다시 위로 스크롤할 때만 화면에 나타나는 유동적인 앱바입니다. 이를 통해 콘텐츠를 더 많이 표시할 수 있으며, 공간 활용을 최적화할 수 있습니다.

구현 단계

1. CustomScrollView 생성

CustomScrollView는 리스트와 앱바를 포함한 다양한 위젯을 스크롤 가능한 레이아웃으로 조합할 수 있는 위젯입니다. 먼저 기본 구조를 설정합니다.

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[], // 여기에 앱바와 리스트를 추가합니다.
  ),
);

2. SliverAppBar 추가

SliverAppBar는 일반 AppBar와 유사하지만, 스크롤 시 앱바를 확장, 축소하거나 숨길 수 있는 추가 기능을 제공합니다.

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Floating App Bar'),
      floating: true, // 스크롤 시 앱바를 다시 나타나게 설정
      expandedHeight: 200, // 확장된 앱바 높이
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/background.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
  ],
);

주요 속성

1. floating:
   • true로 설정하면 스크롤을 위로 올릴 때 앱바가 화면에 나타납니다.
2. expandedHeight:
   • 앱바의 확장된 높이를 지정합니다.
3. flexibleSpace:
   • 확장된 앱바 영역에 배경 이미지나 커스텀 위젯을 추가합니다.

3. SliverList로 리스트 추가

SliverList는 리스트 형태로 데이터를 표시하며, SliverChildBuilderDelegate를 통해 동적으로 항목을 생성할 수 있습니다.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(
        title: Text('Item #$index'),
      );
    },
    childCount: 50, // 리스트 항목 개수
  ),
);

SliverList와 SliverGrid

• SliverList: 세로 방향 리스트.
• SliverGrid: 그리드 형식의 레이아웃.

구현 결과

위 코드를 조합하면 다음과 같은 구조를 얻을 수 있습니다:

1. 스크롤 시 나타나는 앱바.
2. 유동적으로 확장/축소되는 앱바 배경.
3. 리스트와 앱바가 동기화된 부드러운 스크롤.

활용 팁

1. 배경 이미지:
   • flexibleSpace에 Image.network를 추가해 앱바를 시각적으로 개선합니다.
2. 탭과 연계:
   • SliverAppBar에 bottom 속성을 사용하여 탭바를 추가할 수 있습니다.
3. 커스터마이징:
   • 앱바에 아이콘, 텍스트, 애니메이션을 추가해 독창적인 디자인을 구현하세요.

---

결론

Flutter의 SliverAppBar와 CustomScrollView를 활용하면 스크롤에 유연하게 반응하는 앱바를 구현할 수 있습니다. 이를 통해 더 나은 사용자 경험을 제공하며, 다양한 앱 디자인에 활용할 수 있습니다. 위 코드를 기반으로 여러분만의 독창적인 Floating App Bar를 만들어 보세요!

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: [
            // Add the app bar to the CustomScrollView.
            const SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}