플러터 SliverAppBar로 동적이고 유연한 앱바 구현하기

 

앱의 상단에 위치하는 AppBar는 사용자가 앱을 탐색하는 데 중요한 역할을 합니다.

Flutter는 다양한 형태의 AppBar를 제공하는데, 그 중 SliverAppBar는 스크롤에 반응하여 크기와 형태가 변하는 유연한 AppBar를 구현할 수 있는 위젯입니다.

이번 글에서는 SliverAppBar의 기본 사용법과 다양한 옵션을 알아보겠습니다.

 

 

SliverAppBar 위젯이란?

SliverAppBar는 스크롤 가능한 영역에서 사용되는 AppBar로, 스크롤에 따라 크기나 위치가 동적으로 변화할 수 있는 특징이 있습니다. 이 위젯은 주로 긴 리스트나 큰 콘텐츠를 표시할 때 사용되며, 앱의 상단바를 더 유연하게 제어할 수 있습니다.

기본 사용법

SliverAppBar는 CustomScrollView 위젯 내에서 사용되며, SliverList나 SliverGrid 같은 다른 Sliver 위젯들과 함께 구성됩니다. 기본적으로, SliverAppBar는 스크롤에 따라 확장 및 축소되는 헤더 역할을 합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SliverAppBarExample(),
    );
  }
}

class SliverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('SliverAppBar Example'),
              background: Image.network(
                'https://via.placeholder.com/800x400',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text('Item #$index'),
              ),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

주요 속성 설명

• expandedHeight: SliverAppBar가 확장되었을 때의 최대 높이를 지정합니다.
• floating: true일 경우, 스크롤 업 시 즉시 다시 나타납니다.
• pinned: true일 경우, 앱바가 스크롤 시 상단에 고정됩니다.
• flexibleSpace: SliverAppBar의 확장 및 축소 시 동적으로 변화하는 공간을 정의합니다.

SliverAppBar 위젯의 다양한 옵션

flexibleSpace

FlexibleSpaceBar 위젯을 사용하여 SliverAppBar의 확장된 영역을 꾸밀 수 있습니다. 제목, 이미지, 배경색 등 다양한 요소를 설정할 수 있습니다.

SliverAppBar(
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Flexible Title'),
    background: Image.network(
      'https://via.placeholder.com/800x400',
      fit: BoxFit.cover,
    ),
  ),
)

actions

AppBar 우측에 위치할 위젯들(아이콘 버튼 등)을 지정할 수 있습니다.

SliverAppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 검색 버튼 클릭 시 실행될 코드
      },
    ),
  ],
)

snap

floating이 true일 때만 사용 가능하며, 이 속성을 true로 설정하면 스크롤이 약간 내려간 상태에서 SliverAppBar가 자동으로 확장됩니다.

SliverAppBar(
  floating: true,
  snap: true,
)

backgroundColor

AppBar의 배경색을 지정합니다.

SliverAppBar(
  backgroundColor: Colors.blue,
)

elevation

AppBar의 그림자 깊이를 지정합니다. 기본적으로는 4.0입니다.

SliverAppBar(
  elevation: 4.0,
)

bottom

AppBar 아래에 위치할 위젯을 추가할 수 있습니다. 예를 들어, 탭바를 추가할 수 있습니다.

SliverAppBar(
  bottom: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.directions_car)),
      Tab(icon: Icon(Icons.directions_transit)),
      Tab(icon: Icon(Icons.directions_bike)),
    ],
  ),
)

마무리

SliverAppBar 위젯은 Flutter에서 유연하고 동적인 앱바를 구현할 수 있는 강력한 도구입니다. 다양한 속성과 옵션을 활용하여, 사용자의 스크롤 동작에 따라 변하는 다양한 효과를 쉽게 구현할 수 있습니다. 이를 통해 앱의 상단바를 더욱 다채롭게 구성하고, 사용자에게 풍부한 경험을 제공할 수 있습니다.

 

이 블로그가 여러분의 Flutter 개발에 도움이 되었기를 바랍니다! 추가적인 질문이나 설명이 필요하면 댓글로 남겨주세요.

앞으로도 더 많은 Flutter 관련 팁과 트릭을 공유할 예정이니, 블로그 구독을 잊지 마세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱