Flutter SliverAppBar 사용법 및 예제

by

Flutter SliverAppBar는 스크롤 가능한 레이아웃에서 자주 사용되는 위젯입니다. SliverAppBar는 스크롤 시 숨기거나 고정할 수 있는 애니메이티드 앱바로, 보다 다이나믹한 앱 인터페이스를 구현할 때 유용합니다. 이 글에서는 Flutter의 SliverAppBar에 대해 알아보고, 실용적인 예시와 함께 활용 방법을 설명합니다.

SliverAppBar란?

정의 및 개념

SliverAppBar는 Flutter의 Material 디자인 패키지에 포함된 위젯으로, 스크롤 할 때 확장되고 축소되는 앱바입니다. SliverAppBar는 일반 AppBar와 유사해 보이지만, 더 많은 커스터마이즈 옵션과 스크롤 동작을 지원합니다.

주요 특징

  1. 스크롤 동작: 스크롤 시 확장되거나 축소되는 동작을 지원합니다.
  2. 고정 및 고정 해제: 지정된 조건에 따라 앱바를 고정하거나 고정 해제할 수 있습니다.
  3. 유연한 레이아웃: 기본 앱바 UI 외에도 사용자 정의 위젯을 추가할 수 있습니다.

SliverAppBar 사용법

다음은 기본적인 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: [
            SliverAppBar(
              title: Text('Flutter SliverAppBar'),
              floating: false,
              pinned: true,
              snap: false,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(background: FlutterLogo()),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('Item #$index')),
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

SliverAppBar 속성 설명

  • floating: true로 설정하면 스크롤 할 때 빠르게 나타납니다.
  • pinned: true로 설정하면 앱바가 스크롤 상단에 고정됩니다.
  • snap: floating이 true일 때, 스크롤할 때 빠르게 나타납니다.
  • expandedHeight: SliverAppBar가 확장될 때의 최대 높이입니다.
  • flexibleSpace: 확장 시 표시되는 내용입니다. 일반적으로 이미지를 사용합니다.

SliverAppBar 커스터마이징

SliverAppBar는 다양한 속성을 통해 고도로 커스터마이징할 수 있습니다. 예를 들어, 배경 이미지, 그라데이션, 사용자 정의 위젯 등을 추가할 수 있습니다.

SliverAppBar(
  title: Text('Flutter SliverAppBar'),
  floating: true,
  pinned: true,
  snap: true,
  expandedHeight: 250.0,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Flexible Space'),
    background: Stack(
      fit: StackFit.expand,
      children: [
        Image.network(
          'https://example.com/image.jpg',
          fit: BoxFit.cover,
        ),
        const DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment(0.0, 0.5),
              end: Alignment(0.0, 0.0),
              colors: <Color>[
                Color(0x60000000),
                Color(0x00000000),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
)

SliverAppBar와 다른 위젯 결합하기

SliverAppBar는 CustomScrollView와 함께 사용됩니다. 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: [
          SliverAppBar(
            title: Text('Flutter SliverAppBar'),
            floating: true,
            pinned: true,
            snap: true,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Flexible Space'),
              background: FlutterLogo(),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 20,
            ),
          ),
          SliverFillRemaining(
            child: Center(
              child: Text('No more items'),
            ),
          )
        ],
      )),
    );
  }
}
Flutter-SliverAppBar-예제

SliverAppBar 활용 사례

뉴스 피드

SliverAppBar는 뉴스 피드와 같은 스크롤 레이아웃에서 자주 사용됩니다. 사용자에게 상단 이미지를 제공하고, 스크롤할 때 헤더를 축소하는 방식으로 뉴스 기사를 읽기 쉽게 만듭니다.

프로필 화면

사용자의 프로필 페이지에서도 SliverAppBar를 활용할 수 있습니다. 사용자 사진이 상단에 크게 표시되고, 스크롤할 때 정보가 축소됩니다.

대시보드

데이터 대시보드에서 중요한 그래프나 차트를 상단에 배치하고, 사용자 스크롤에 따라 콘텐츠를 표시하도록 할 수 있습니다.

Leave a Comment