[flutter] 플러터 프로바이더를 사용한 비동기 데이터 처리

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 서버에서 데이터를 비동기적으로 가져와야 하는 상황이 많이 발생합니다. 이때 플러터 프로바이더(Provider) 패키지는 효과적으로 상태 관리와 비동기 데이터 처리를 할 수 있게 해줍니다. 이 포스트에서는 플러터 프로바이더를 사용하여 비동기 데이터를 처리하는 방법에 대해 알아보겠습니다.

Provider 패키지 설치

먼저, Provider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그런 다음 터미널에서 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

모델 클래스 작성

비동기 데이터를 처리하기 위한 모델 클래스를 작성해보겠습니다. 예를 들어, 다음과 같이 Post 모델 클래스를 정의할 수 있습니다.

class Post {
  final int id;
  final String title;
  
  Post({required this.id, required this.title});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
    );
  }
}

데이터 가져오기

이제 Provider를 사용하여 데이터를 비동기적으로 가져오는 방법을 살펴보겠습니다. 먼저, ChangeNotifier를 상속하는 PostProvider 클래스를 작성하여 데이터 가져오기와 상태 관리를 구현합니다.

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

class PostProvider with ChangeNotifier {
  List<Post> _posts = [];

  List<Post> get posts => _posts;

  Future<void> fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      // 데이터 성공적으로 가져오면 상태 업데이트
      _posts = (response.body as List).map((json) => Post.fromJson(json)).toList();
      notifyListeners();
    } else {
      // 데이터 가져오기 실패시 처리
    }
  }
}

위젯에서 Provider 사용

이제 위젯에서 Provider를 사용하여 데이터를 가져오고 화면에 표시할 수 있습니다. 예를 들어, Consumer 위젯을 사용하여 PostProvider의 상태를 구독하고 UI를 업데이트할 수 있습니다.

Consumer<PostProvider>(
  builder: (context, provider, child) {
    if (provider.posts.isEmpty) {
      return CircularProgressIndicator();
    } else {
      return ListView.builder(
        itemCount: provider.posts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(provider.posts[index].title),
          );
        },
      );
    }
  },
)

마무리

이렇게 Provider를 사용하여 플러터 앱에서 비동기 데이터를 처리하는 방법을 알아보았습니다. Provider를 효과적으로 활용하면 상태 관리와 비동기 데이터 처리를 간편하게 구현할 수 있습니다.

더 많은 정보는 공식 문서를 참고하시기 바랍니다.