SliverAppBar

하요·2024년 6월 9일

SliverAppBar flutter

Flutter Widget of the Week

목록 보기

12/18

Flutter에서 스크롤 가능한 AppBar 구현하기: SliverAppBar

SliverAppBar는 스크롤 가능한 앱 바를 제공합니다. 주로 CustomScrollView와 함께 사용되며, 사용자에게 뛰어난 시각적 경험을 제공합니다.

주요 속성

title: 앱 바의 제목을 설정합니다. 일반적으로 Text 위젯을 사용합니다.
actions: 앱 바의 오른쪽에 위치할 위젯들의 리스트를 설정합니다. 주로 IconButton 등을 포함합니다.
leading: 앱 바의 왼쪽에 위치할 위젯을 설정합니다. 일반적으로 뒤로 가기 버튼이나 메뉴 버튼을 포함합니다.
expandedHeight: 앱 바가 확장될 때의 최대 높이를 설정합니다.
flexibleSpace: 앱 바의 확장 가능한 영역을 설정합니다. 일반적으로 이미지나 다른 콘텐츠를 포함할 수 있는 FlexibleSpaceBar 위젯을 사용합니다.
floating: true로 설정하면 스크롤 시 앱 바가 화면에 나타나고, 스크롤을 멈추면 사라집니다.
pinned: true로 설정하면 앱 바가 스크롤 시 상단에 고정됩니다.
snap: floating이 true일 때만 사용 가능하며, 스크롤을 멈출 때 앱 바가 자동으로 펼쳐집니다.

Flutter에서 SliverAppBar의 동작 모드: Floating, Pinned, Snap

SliverAppBar는 다양한 속성을 통해 스크롤 동작을 제어할 수 있습니다. 이 속성들은 앱 바가 스크롤에 반응하는 방식을 결정합니다. 다음은 floating, pinned, snap 속성에 대한 자세한 설명입니다.

Floating

설명: floating 속성을 true로 설정하면 스크롤 시 앱 바가 화면에 나타납니다. 사용자가 스크롤을 내리면 앱 바가 바로 나타나고, 스크롤을 올리면 사라집니다.
사용 예: 페이지의 중간이나 하단에 중요한 기능을 빠르게 접근할 수 있게 하고자 할 때 유용합니다.

Pinned

설명: pinned 속성을 true로 설정하면 앱 바가 스크롤 시 상단에 고정됩니다. 스크롤이 내려가도 앱 바가 항상 상단에 고정되어 보입니다.
사용 예: 항상 상단에 앱 바를 유지하고자 할 때 사용합니다. 예를 들어, 상단 네비게이션 바를 항상 보이게 하고자 할 때 유용합니다.

Snap

설명: snap 속성은 floating이 true일 때만 사용 가능하며, 스크롤을 멈출 때 앱 바가 자동으로 펼쳐집니다. 사용자가 스크롤을 멈출 때 앱 바가 완전히 펼쳐지거나 숨겨집니다.
사용 예: 사용자가 스크롤을 멈출 때 앱 바가 자동으로 완전히 보이게 하여 중요한 정보를 쉽게 접근할 수 있게 하고자 할 때 유용합니다.

주요 활용도

스크롤 가능한 앱 바: 사용자에게 더 나은 UI/UX 경험을 제공하기 위해 앱 바가 스크롤에 따라 동적으로 변합니다.
이미지 및 콘텐츠 통합: 확장 가능한 영역을 통해 이미지나 다른 콘텐츠를 앱 바에 통합할 수 있습니다.
고정된 앱 바: 스크롤 시 앱 바가 항상 상단에 고정되도록 설정할 수 있습니다.

코드 예제

아래 예제는 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(
              title: Text('SliverAppBar Example'),
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://example.com/image.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              floating: false,
              pinned: true,
              snap: false,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item #$index'),
                  );
                },
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}