안녕하세요! 이번에는 플러터(Flutter)에서 sticky 헤더를 사용하여 영화 추천 앱을 디자인하는 방법에 대해 알아보겠습니다. Sticky 헤더는 스크롤 가능한 목록에서 항목을 그룹으로 나누거나 정보를 표시하는 데 사용됩니다. 이를 통해 사용자가 스크롤할 때 헤더가 화면 상단에 고정되어 유용한 정보를 계속해서 표시할 수 있습니다.
목차
1. 프로젝트 설정
우선, Flutter 프로젝트를 생성하고 개발 환경을 설정합니다. Flutter SDK와 Flutter IDE를 설치한 후 프로젝트를 생성합니다.
2. Sticky 헤더 라이브러리 추가하기
Sticky 헤더를 구현하기 위해 flutter_sticky_header 라이브러리를 사용합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 라이브러리를 추가합니다.
dependencies:
flutter_sticky_header: ^0.5.0
그런 다음 터미널을 열고 flutter pub get 명령을 실행하여 종속성을 업데이트합니다.
3. 영화 데이터 가져오기
영화 추천 앱을 구현하기 위해 영화 데이터를 가져와야 합니다. 이 예제에서는 http 패키지를 사용하여 영화 데이터를 가져옵니다.
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<List<Map<String, dynamic>>> fetchMovies() async {
final response = await http.get(Uri.parse('https://api.movies.com/movies'));
if (response.statusCode == 200) {
final body = json.decode(response.body);
return body['movies'];
} else {
throw Exception('Failed to fetch movies');
}
}
위의 코드는 API를 통해 영화 데이터를 가져오는 예시입니다. 실제 앱에서는 API 엔드포인트 및 데이터 구조를 본인의 앱에 맞게 수정해야 합니다.
4. 스크롤 가능한 목록 디자인하기
영화 데이터를 가져온 후에는 스크롤 가능한 목록을 디자인해야 합니다. ListView.builder를 사용하여 각 영화 항목을 구성하고 리스트를 생성합니다.
ListView.builder(
itemCount: movies.length,
itemBuilder: (BuildContext context, int index) {
final movie = movies[index]['title'];
return ListTile(
title: Text(movie),
);
},
)
위의 코드에서 movies는 영화 데이터가 포함된 리스트입니다. 실제 앱에서는 fetchMovies 함수를 사용하여 데이터를 가져온 후에 setState 함수를 호출하여 목록을 업데이트해야 합니다.
5. 스티키 헤더 추가하기
마지막으로, 가져온 영화 데이터를 기준으로 스티키 헤더를 추가합니다. SliverStickyHeader 위젯을 사용하여 스티키 헤더를 구성할 수 있습니다.
CustomScrollView(
slivers: <Widget>[
SliverStickyHeader(
header: Container(
height: 60,
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.centerLeft,
child: Text(
'A',
style: TextStyle(fontSize: 24),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
final movie = movies[index];
return ListTile(
title: Text(movie['title']),
subtitle: Text(movie['description']),
);
},
childCount: movies.length,
),
),
),
],
)
위의 코드에서 ‘A’는 헤더에 표시될 문자입니다. 실제 앱에서는 영화 데이터를 기준으로 헤더를 동적으로 생성해야 합니다.
이제 플러터에서 스티키 헤더를 사용하여 영화 추천 앱을 디자인하는 방법에 대해 알아보았습니다. 이를 활용하여 다양한 목록을 구성하고 스크롤 가능한 앱을 개발해보세요!
더 자세한 내용은 flutter_sticky_header 라이브러리 문서를 참조하시기 바랍니다.