40. 스크롤 가능한 리스트 위에 플로팅 앱바를 배치하기 | Flutter

크레용 스타일, dall-e

 

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 위젯을 사용하여 각 리스트 항목을 표시합니다.

결과:

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

 

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,
    ),
  ),
),
        

코드 설명:

• backgroundColor를 Colors.transparent로 설정하여 투명한 앱바를 만듭니다.
• 텍스트 색상을 흰색으로 설정하여 배경 이미지와의 대비를 높입니다.

 

05. 결론

1) 플로팅 앱바의 장점 요약

플로팅 앱바는 다음과 같은 여러 가지 장점을 제공합니다:

• 사용자 경험 향상: 스크롤 시 앱바가 부드럽게 나타나고 사라져서 사용자가 콘텐츠에 집중할 수 있습니다.
• 공간 절약: 필요할 때만 앱바가 나타나기 때문에 화면 공간을 효율적으로 사용할 수 있습니다.
• 시각적 매력: 배경 이미지와 애니메이션을 활용하여 시각적으로 매력적인 인터페이스를 제공합니다.

2) 추가 학습 자료와 참고 링크

Flutter에서 플로팅 앱바와 관련된 추가 학습 자료와 참고 링크를 제공합니다.

• Flutter 공식 문서
• Flutter Widget of the Week: SliverAppBar

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.08.02 - [Study] - 35. Flutter로 다양한 유형의 아이템이 포함된 리스트 만들기 | Flutter

2024.07.31 - [Study] - 34. Flutter GridView로 그리드 리스트 구현하기 | Flutter

2024.07.31 - [Study] - 33. Flutter ListView를 사용한 수평 리스트 제작 방법 | Flutter

33. Flutter ListView를 사용한 수평 리스트 제작 방법 | Flutter

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)