안녕하세요! 오늘은 플러터를 사용하여 sticky 헤더를 가진 영화 목록 앱을 만들어보겠습니다.
목차
개요
이 앱은 헤더가 스크롤될 때마다 상단에 고정되는 sticky 헤더를 가진 영화 목록을 표시합니다. 사용자는 영화를 목록에서 선택하여 자세한 정보를 볼 수 있습니다.
프로젝트 설정
첫째로, 플러터 프로젝트를 생성하고 필요한 종속성을 추가해야 합니다. pubspec.yaml 파일을 열고 다음 종속성을 추가합니다:
dependencies:
flutter_sticky_header: ^0.4.0
이 종속성은 sticky 헤더를 만들기 위해 필요한 패키지입니다.
스티키 헤더 위젯 만들기
먼저, flutter_sticky_header 패키지에서 제공하는 StickyHeader 위젯을 사용하여 sticky 헤더를 만들어보겠습니다.
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
class StickyHeaderWidget extends StatelessWidget {
final String title;
StickyHeaderWidget({required this.title});
@override
Widget build(BuildContext context) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.grey[200],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
title,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
content: Container(
height: 300.0,
color: Colors.white,
),
);
}
}
StickyHeader 위젯은 header와 content를 가지며, header 위젯은 sticky 헤더의 모양과 스타일을 결정합니다. content 위젯은 해당 헤더 아래에 표시되는 컨텐츠를 담당합니다.
영화 목록 구현하기
이제 StickyHeaderWidget을 사용하여 영화 목록을 구현합니다.
class MovieListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('영화 목록'),
),
body: ListView.builder(
itemCount: 10, // 영화 목록 수
itemBuilder: (context, index) {
return StickyHeaderWidget(title: '카테고리 ${index+1}');
},
),
);
}
}
ListView.builder를 사용하여 영화 목록을 동적으로 생성합니다. StickyHeaderWidget을 생성하여 각 카테고리의 sticky 헤더를 표시합니다.
결론
이제 여러분은 플러터를 사용하여 sticky 헤더를 가진 영화 목록 앱을 만들 수 있습니다. 이 앱을 통해 사용자가 카테고리별로 영화를 쉽게 탐색할 수 있게 됩니다.
플러터 공식 문서(https://flutter.dev)나 플러터 패키지 저장소(https://pub.dev)에서 더 많은 정보를 찾아보세요. 행운을 빕니다!