[flutter] 플러터 프로바이더를 사용하여 영화 정보 가져오기

22 Dec 2023

flutter

플러터(Flutter) 어플리케이션을 개발할 때, 데이터 전역 상태 관리가 필요한 경우가 있습니다. 이때 플러터 프로바이더(Provider) 라이브러리를 사용하여 간단하게 전역 데이터를 관리할 수 있습니다. 이번 포스트에서는 플러터 프로바이더를 사용하여 영화 정보를 가져오는 예제를 살펴보겠습니다.

프로바이더(Provider) 설정

프로바이더를 사용하기 위해 먼저 pubspec.yaml 파일에 다음과 같이 provider 라이브러리를 추가합니다.

dependencies:
  provider: ^6.0.1

이제 터미널에서 flutter pub get 명령어를 사용하여 라이브러리를 설치합니다.

영화 데이터 모델 생성

예제에서는 영화 정보를 다루기 위한 Movie 모델 클래스를 생성합니다. 이 클래스는 제목, 감독 등의 필드를 포함할 수 있습니다.

class Movie {
  final String title;
  final String director;
  
  Movie({required this.title, required this.director});
}

영화 데이터 관리하기

이제 플러터 프로바이더를 사용하여 전역적으로 영화 데이터를 관리합니다. 우선, ChangeNotifier 클래스를 상속받은 MovieList 클래스를 생성하고, 영화 데이터 목록을 관리합니다.

import 'package:flutter/material.dart';

class MovieList extends ChangeNotifier {
  List<Movie> _movies = [];

  List<Movie> get movies => _movies;

  void addMovie(Movie movie) {
    _movies.add(movie);
    notifyListeners();
  }
}

위 코드에서 notifyListeners 메서드는 데이터 변경을 알립니다.

프로바이더 사용하기

이제 화면에서 플러터 프로바이더를 사용하여 영화 데이터를 가져와 렌더링할 수 있습니다.

class MovieListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Movie List'),
      ),
      body: Consumer<MovieList>(
        builder: (context, movieList, child) {
          return ListView.builder(
            itemCount: movieList.movies.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(movieList.movies[index].title),
                subtitle: Text('Directed by ${movieList.movies[index].director}'),
              );
            },
          );
        },
      ),
    );
  }
}

위 코드에서 Consumer 위젯은 MovieList를 구독하고, 데이터가 변경될 때마다 화면을 다시 렌더링합니다.

이제 플러터 앱에서 플러터 프로바이더를 사용하여 영화 정보를 더욱 효율적으로 관리할 수 있습니다.

마치며

이번 포스트에서는 플러터 프로바이더를 사용하여 영화 정보를 가져오는 방법을 알아보았습니다. 데이터 전역 상태 관리에 대한 더 많은 정보는 공식 문서를 참고하시기 바랍니다.