Implementing a Floating App Bar Above a List

01. 서론

1) 플로팅 앱바의 필요성

플로팅 앱바는 현대 모바일 애플리케이션에서 중요한 UI 요소 중 하나입니다. 사용자 경험을 향상시키기 위해 앱바는 스크롤 동작에 따라 동적으로 나타나거나 사라질 수 있어야 합니다. 플로팅 앱바는 사용자가 화면을 스크롤할 때 앱바가 부드럽게 나타나거나 사라지게 하여 콘텐츠에 집중할 수 있도록 도와줍니다. 이는 특히 긴 리스트나 복잡한 레이아웃에서 사용자 친화적인 인터페이스를 제공합니다.

2) Flutter에서 CustomScrollView와 SliverAppBar 소개

Flutter는 다양한 스크롤 효과를 구현할 수 있는 강력한 도구를 제공합니다. 그 중 CustomScrollView와 SliverAppBar는 복잡한 스크롤 레이아웃을 구현하는 데 필수적인 위젯입니다.

CustomScrollView: 여러 종류의 슬리버를 조합하여 스크롤 가능한 영역을 만들 수 있는 위젯입니다. 이를 통해 다양한 스크롤 효과와 레이아웃을 구현할 수 있습니다.
SliverAppBar: 스크롤 시 나타나거나 사라지는 앱바를 구현할 수 있는 위젯입니다. floating 속성을 사용하여 플로팅 효과를 제공하며, pinned 속성을 사용하여 상단에 고정된 앱바를 구현할 수 있습니다.

02. 플로팅 앱바 구현 방법

1) CustomScrollView 생성

CustomScrollView는 여러 종류의 슬리버를 조합하여 스크롤 가능한 영역을 만들 수 있는 위젯입니다. 이를 통해 다양한 스크롤 효과와 레이아웃을 구현할 수 있습니다. CustomScrollView를 생성하기 위해 먼저 Scaffold 위젯의 appBar 속성을 제거하고, body 속성에 CustomScrollView를 추가합니다.


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와 SliverList를 추가할 예정
          ],
        ),
      ),
    );
  }
}

2) SliverAppBar를 사용한 플로팅 앱바 추가

SliverAppBar는 스크롤 시 나타나거나 사라지는 앱바를 구현할 수 있는 위젯입니다. floating 속성을 true로 설정하여 플로팅 앱바를 구현할 수 있습니다.


SliverAppBar(
  expandedHeight: 200.0,
  floating: true,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('플로팅 앱바 예제'),
    background: Image.network(
      'https://flutter.dev/images/catalog-widget-placeholder.png',
      fit: BoxFit.cover,
    ),
  ),
),

3) SliverList를 사용한 아이템 리스트 추가

SliverList는 리스트 항목을 동적으로 생성하여 스크롤할 수 있게 합니다. SliverChildBuilderDelegate를 사용하여 리스트 항목을 정의할 수 있습니다.


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

03. 예제 코드 및 설명

1) CustomScrollView와 SliverAppBar 예제 코드

CustomScrollView와 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: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: true,
              pinned: true,
              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: 50, // 리스트 항목 수
              ),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명:

CustomScrollView를 사용하여 스크롤 가능한 영역을 생성합니다.
SliverAppBar를 사용하여 스크롤 시 나타나거나 사라지는 플로팅 앱바를 추가합니다.
SliverList를 사용하여 50개의 리스트 항목을 동적으로 생성합니다.

결과:

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

2) SliverList 예제 코드

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: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: true,
              pinned: true,
              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: 50, // 리스트 항목 수
              ),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명:

SliverList는 SliverChildBuilderDelegate를 사용하여 리스트 항목을 동적으로 생성합니다.
childCount 속성을 사용하여 생성할 리스트 항목의 수를 지정할 수 있습니다.
ListTile 위젯을 사용하여 각 리스트 항목을 표시합니다.

결과:

04. 추가 설정 및 팁

1) 다양한 SliverAppBar 속성 활용

SliverAppBar는 다양한 속성을 제공하여 다양한 스크롤 효과와 동작을 제어할 수 있습니다. 여기서는 자주 사용되는 몇 가지 주요 속성에 대해 설명합니다.

floating: true로 설정하면 스크롤할 때 앱바가 화면에 나타납니다.
pinned: true로 설정하면 앱바가 스크롤 시 상단에 고정됩니다.
snap: floating이 true일 때 snap을 true로 설정하면 스크롤이 멈췄을 때 앱바가 자동으로 나타납니다.
flexibleSpace: 확장된 상태에서 표시될 위젯을 설정합니다.
expandedHeight: 확장된 상태에서의 최대 높이를 설정합니다.


SliverAppBar(
  expandedHeight: 250.0,
  floating: true,
  pinned: true,
  snap: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('플로팅 앱바'),
    background: Image.network(
      'https://flutter.dev/images/catalog-widget-placeholder.png',
      fit: BoxFit.cover,
    ),
  ),
),

코드 설명:

expandedHeight를 250.0으로 설정하여 확장된 상태에서의 최대 높이를 지정합니다.
floating, pinned, snap 속성을 조합하여 스크롤 동작을 제어합니다.

2) 디자인 및 사용자 경험 향상을 위한 팁

플로팅 앱바를 사용하여 앱의 디자인과 사용자 경험을 향상시키기 위한 몇 가지 팁을 제공합니다.

배경 이미지: flexibleSpace에 배경 이미지를 추가하여 시각적으로 매력적인 인터페이스를 제공합니다.
투명도: 앱바의 투명도를 조절하여 콘텐츠와의 시각적 통합을 강화합니다.
애니메이션: 스크롤 애니메이션을 활용하여 사용자에게 부드러운 경험을 제공합니다.
콘텐츠 가독성: 확장된 상태에서 앱바의 콘텐츠가 가독성을 유지하도록 적절한 색상과 대비를 사용합니다.


SliverAppBar(
  expandedHeight: 250.0,
  floating: true,
  pinned: true,
  snap: true,
  backgroundColor: Colors.transparent,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('플로팅 앱바', style: TextStyle(color: Colors.white)),
    background: Image.network(
      'https://flutter.dev/images/catalog-widget-placeholder.png',
      fit: BoxFit.cover,
    ),
  ),
),

코드 설명: