플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로서, 아름다운 사용자 인터페이스(UI)를 만들 수 있는 기능을 제공합니다. 이번에는 플러터를 사용하여 sticky 헤더를 가진 책 추천 앱을 디자인해보겠습니다.
1. 프로젝트 설정
먼저, 새로운 플러터 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하여 새로운 프로젝트를 생성합니다:
flutter create book_recommendation_app
프로젝트를 생성한 후, pubspec.yaml 파일에서 다음 종속성(dependency)을 추가합니다:
dependencies:
flutter_sticky_header: ^0.4.0
이러한 종속성(dependency)을 추가함으로써 flutter_sticky_header 패키지를 사용할 수 있게 됩니다.
2. UI 디자인
2.1 헤더 디자인
먼저, sticky 헤더를 디자인하기 위해 SliverStickyHeader 위젯을 사용해야 합니다. 이 위젯은 스크롤 가능한 리스트뷰(ListView)에 고정된 헤더를 추가할 수 있습니다.
SliverStickyHeader(
header: Container(
height: 60,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
'책 추천',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('책 제목'),
subtitle: Text('작가'),
),
childCount: 10,
),
),
)
위 코드에서, SliverStickyHeader 위젯을 사용하여 sticky 헤더를 구성했습니다. header 매개변수에는 헤더에 표시할 콘텐츠를 정의하는 위젯을 추가할 수 있습니다. 이 예제에서는 Container 위젯을 사용하여 헤더의 배경색과 텍스트를 설정했습니다.
sliver 매개변수에는 sticky 헤더에 속하는 슬리버(sliver) 위젯을 추가할 수 있습니다. 위 코드에서는 SliverList 위젯을 사용하여 리스트뷰를 구성했습니다. SliverChildBuilderDelegate를 사용하여 리스트 아이템을 동적으로 렌더링했습니다.
2.2 리스트 디자인
리스트 뷰에서 각 아이템에 대한 정보를 표시하기 위해 ListTile 위젯을 사용할 수 있습니다. 이 위젯은 아이템에 제목과 부제목을 추가할 수 있습니다.
ListTile(
title: Text('책 제목'),
subtitle: Text('작가'),
)
위 예제에서는 ListTile 위젯을 사용하여 각 책에 대한 정보를 표시했습니다. title 매개변수에는 책의 제목을, subtitle 매개변수에는 작가의 이름을 전달했습니다.
3. 결과 확인
위에서 디자인한 코드를 실행하여 앱을 확인해보세요. 책 추천 페이지를 스크롤하면 헤더가 화면 상단에 고정되는 것을 확인할 수 있습니다.
이처럼 플러터에서 sticky 헤더를 사용하여 책 추천 앱을 디자인할 수 있습니다. 플러터의 다양한 위젯과 패키지를 활용하여 멋진 UI를 구성해보세요!