[flutter] Flutter Riverpod에서 영화 예매 앱 만들기
Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, Riverpod는 Flutter 애플리케이션의 상태 관리를 단순화하는 데 도움이 되는 라이브러리입니다. 여기에서는 Flutter와 Riverpod를 사용하여 간단한 영화 예매 애플리케이션을 어떻게 만들 수 있는지 알아보겠습니다.
목차
프로젝트 설정
먼저 Flutter 프로젝트를 생성하고, riverpod 라이브러리를 pubspec.yaml 파일에 추가합니다.
dependencies:
flutter:
sdk: flutter
riverpod: ^1.0.3
그런 다음, 터미널에서 flutter pub get 명령어를 실행하여 종속성을 다운로드합니다.
영화 목록 가져오기
영화 목록을 가져오기 위해 API를 호출할 수 있는 http 패키지를 추가합니다.
dependencies:
http: ^0.14.0
그리고 영화 데이터를 가져오기 위한 Movie 클래스를 작성합니다.
class Movie {
final int id;
final String title;
final String director;
// ... other properties
Movie({
required this.id,
required this.title,
required this.director,
// ... other properties
});
}
API에서 영화 목록을 가져오는 Provider를 생성합니다.
final moviesProvider = FutureProvider<List<Movie>>((ref) async {
final response = await http.get(Uri.parse('https://example.com/movies'));
if (response.statusCode == 200) {
// API로부터 데이터를 파싱하여 Movie 목록을 반환
return parseMovies(response.body);
} else {
throw Exception('Failed to load movies');
}
});
상태 관리
영화 목록을 가져오고 관리하기 위해 riverpod의 Provider를 사용합니다.
final selectedMovieProvider = StateProvider<Movie?>((ref) => null);
또한, 선택된 영화를 업데이트할 수 있는 함수를 작성합니다.
void selectMovie(ProviderReference ref, Movie movie) {
ref.read(selectedMovieProvider).state = movie;
}
UI 구축
flutter_riverpod의 Consumer 위젯을 사용하여 UI를 구성합니다.
Consumer(
builder: (context, watch, child) {
final movies = watch(moviesProvider);
return ListView.builder(
itemCount: movies.length,
itemBuilder: (context, index) {
final movie = movies[index];
return ListTile(
title: Text(movie.title),
onTap: () => selectMovie(context, movie),
);
},
);
},
);
이것으로 간단한 영화 예매 앱을 만들기 위한 기초적인 단계를 마쳤습니다.
위 코드 예제는 Riverpod를 사용하여 간단한 영화 예매 앱을 만드는 방법을 보여줍니다. Riverpod는 Flutter 애플리케이션의 상태 관리를 효율적으로 처리하는 데 도움을 주는 강력한 도구입니다.
더 많은 Riverpod 기능 및 사용법은 공식 문서에서 확인할 수 있습니다.