SliverAppBar는 Flutter에서 스크롤 가능한 앱 바를 구현할 수 있는 위젯입니다. 주로 CustomScrollView와 함께 사용되며, 사용자에게 뛰어난 시각적 경험을 제공합니다. 다음은 SliverAppBar의 주요 특징과 사용 방법입니다:
주요 특징
- title: 앱 바의 제목을 설정합니다. 일반적으로 Text 위젯을 사용합니다.
- actions: 앱 바의 오른쪽에 위치할 위젯들의 리스트를 설정합니다. 주로 IconButton 등을 포함합니다.
- leading: 앱 바의 왼쪽에 위치할 위젯을 설정합니다. 일반적으로 뒤로 가기 버튼이나 메뉴 버튼을 포함합니다.
- expandedHeight: 앱 바가 확장될 때의 최대 높이를 설정합니다.
- flexibleSpace: 앱 바의 확장 가능한 영역을 설정합니다. 일반적으로 이미지나 다른 콘텐츠를 포함할 수 있는 FlexibleSpaceBar 위젯을 사용합니다.
- floating: true로 설정하면 스크롤 시 앱 바가 화면에 나타나고, 스크롤을 멈추면 사라집니다.
- pinned: true로 설정하면 앱 바가 스크롤 시 상단에 고정됩니다.
- snap: floating이 true일 때만 사용 가능하며, 스크롤을 멈출 때 앱 바가 자동으로 펼쳐집니다.
사용 예시
다음은 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,
),
),
],
),
),
);
}
}
주요 속성 설명
- floating: 스크롤 시 앱 바가 화면에 나타나고, 스크롤을 멈추면 사라집니다.
- pinned: 스크롤 시 앱 바가 상단에 고정됩니다.
- snap: floating이 true일 때만 사용 가능하며, 스크롤을 멈출 때 앱 바가 자동으로 펼쳐집니다.
SliverAppBar는 다양한 속성을 통해 스크롤 동작을 제어할 수 있으며, 사용자에게 더 나은 UI/UX 경험을 제공합니다.
1: Flutter 공식 문서 – SliverAppBar 2: LogRocket Blog – How to add SliverAppBar to your Flutter app
추가 단계별 사용예
SliverAppBar는 스크롤 가능한 앱 바를 만들 때 사용합니다. 주로 스크롤링 리스트와 함께 사용되며, 앱 바가 스크롤링되면서 확장되거나 축소되는 효과를 줍니다. SliverAppBar는 CustomScrollView와 함께 사용되어야 합니다. 아래는 SliverAppBar를 사용하는 방법을 단계별로 설명하겠습니다.
1. 기본 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(
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverAppBar'),
background: Image.network(
'https://via.placeholder.com/350x150',
fit: BoxFit.cover,
),
),
floating: true,
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('Item #$index'),
),
childCount: 50,
),
),
],
),
),
);
}
}코드 설명
CustomScrollView: 여러 슬리버 위젯을 스크롤 가능한 영역에 배치할 수 있는 위젯입니다.SliverAppBar: 스크롤 가능한 앱 바입니다.expandedHeight: 앱 바가 확장되었을 때의 높이입니다.flexibleSpace:FlexibleSpaceBar를 사용하여 확장 및 축소되는 앱 바의 내용을 정의합니다.floating:true로 설정하면, 스크롤할 때 앱 바가 즉시 나타납니다.pinned:true로 설정하면, 앱 바가 스크롤 위치에 고정됩니다.SliverList: 슬리버 위젯 목록을 생성합니다.SliverChildBuilderDelegate:ListView의itemBuilder와 유사하게 작동합니다.childCount: 목록의 아이템 개수를 지정합니다.
2. SliverAppBar 속성
SliverAppBar에는 다양한 속성이 있으며, 각 속성의 역할을 설명합니다.
expandedHeight: 앱 바가 확장되었을 때의 높이입니다.flexibleSpace: 앱 바의 확장된 부분에 표시될 위젯을 정의합니다.title: 축소된 상태에서의 앱 바 타이틀입니다.floating:true로 설정하면, 사용자가 스크롤할 때 앱 바가 즉시 나타납니다.pinned:true로 설정하면, 앱 바가 스크롤 위치에 고정됩니다.snap:true로 설정하면,floating이true일 때 앱 바가 스크롤이 멈출 때 확장됩니다.bottom: 앱 바의 하단에 추가적인 위젯을 추가할 수 있습니다. 예를 들어,TabBar등을 추가할 수 있습니다.
3. 고급 예제
SliverAppBar를 사용하여 탭 바를 추가하는 예제를 보겠습니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverAppBar with Tabs'),
background: Image.network(
'https://via.placeholder.com/350x150',
fit: BoxFit.cover,
),
),
floating: true,
pinned: true,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
SliverFillRemaining(
child: TabBarView(
children: [
Center(child: Text('Car')),
Center(child: Text('Transit')),
Center(child: Text('Bike')),
],
),
),
],
),
),
),
);
}
}코드 설명
DefaultTabController: 탭 바와 탭 바 뷰를 관리하는 위젯입니다.SliverAppBar의bottom속성에TabBar를 추가하여 탭 바를 앱 바의 하단에 위치시킵니다.SliverFillRemaining: 남은 공간을 채우는 슬리버 위젯입니다. 여기서는TabBarView를 사용하여 각 탭에 해당하는 뷰를 표시합니다.
요약
SliverAppBar는 스크롤 가능한 앱 바를 만들 때 사용합니다.CustomScrollView와 함께 사용되어 다양한 슬리버 위젯을 조합할 수 있습니다.SliverAppBar의 다양한 속성을 활용하여 다양한 효과를 구현할 수 있습니다.TabBar와TabBarView를 추가하여 고급 내비게이션을 구현할 수 있습니다.
이 예제들을 통해 SliverAppBar를 사용하는 기본적인 방법과 고급 설정 방법을 이해할 수 있습니다. 실제 프로젝트에서는 이러한 예제를 기반으로 더 복잡한 레이아웃과 기능을 추가하여 사용할 수 있습니다.