플러터는 Google에서 개발한 UI 프레임워크로, 휴대폰, 웹, 데스크탑 등 다양한 플랫폼에서 동작하는 애플리케이션을 개발할 수 있습니다. 이번 포스트에서는 플러터의 Sticky 헤더를 활용하여 예약 목록 앱을 구현하는 방법에 대해 알아보겠습니다.
목차
프로젝트 설정
프로젝트를 생성하고 필요한 패키지를 추가합니다. 이 예제에서는 flutter_sticky_header 패키지를 사용합니다.
dependencies:
flutter_sticky_header: ^0.4.0
헤더 위젯 구현
헤더 위젯은 sticky_header 패키지에서 제공하는 SliverStickyHeader 위젯을 사용합니다. 이 위젯은 스크롤 가능한 리스트 내에서 헤더를 고정하여 출력해주는 기능을 제공합니다.
SliverStickyHeader 위젯을 사용하기 위해 CustomScrollView를 사용하여 스크롤 가능한 리스트를 구현합니다.
CustomScrollView(
slivers: [
SliverStickyHeader(
header: Container(
height: 50,
color: Colors.blue,
child: Center(
child: Text(
'Sticky Header',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
// 예약 목록 아이템을 반환하는 코드
},
childCount: itemCount,
),
),
),
],
)
리스트 아이템 구현
예약 목록의 각 아이템은 SliverChildBuilderDelegate를 사용하여 동적으로 생성될 수 있습니다. 아래 코드는 예약 목록의 아이템을 생성하는 코드입니다.
Widget _buildListItem(BuildContext context, int index) {
return ListTile(
title: Text('Reservation $index'),
subtitle: Text('Reservation details'),
);
}
스크롤 및 스티키 헤더 적용
앱의 스크롤 동작과 스티키 헤더를 적용하기 위해서는 CustomScrollView 위젯을 사용해야 합니다. SliverStickyHeader 위젯을 통해 헤더의 동작을 정의하고, SliverList를 통해 리스트 아이템을 출력합니다.
CustomScrollView(
slivers: [
SliverStickyHeader(
header: Container(
height: 50,
color: Colors.blue,
child: Center(
child: Text(
'Sticky Header',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
_buildListItem,
childCount: itemCount,
),
),
),
],
)
이제 앱을 실행해보면, 스크롤 가능한 예약 목록이 나타나고 헤더가 스크롤을 따라 이동하는 것을 확인할 수 있습니다.
결론
이번 포스트에서는 플러터의 Sticky 헤더를 사용하여 예약 목록 앱을 구현하는 방법에 대해 알아보았습니다. Sticky 헤더는 앱의 사용자 경험을 향상시키는데 유용한 기능 중 하나입니다. 플러터의 다양한 기능을 활용하여 원하는 UI를 구현해보세요.
참고: