Flutter에서 Provider 패키지를 사용하면 앱의 다양한 부분 간에 데이터를 공유할 수 있습니다. 이 기능을 이용하여 API 호출 관련된 데이터를 관리할 수 있습니다. 본 블로그에서는 Provider를 사용하여 API를 호출하고 데이터를 관리하는 방법에 대해 알아보겠습니다.

Provider 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

이후 패키지를 설치하고, main.dart 파일에서 다음과 같이 Provider를 import 합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

모델 및 서비스 작성하기

API와의 통신을 위해 데이터 모델과 API 서비스를 작성해야 합니다. 간단한 예시로, 유저 정보를 가져오는 API를 호출하기 위해 User 모델과 UserService 클래스를 작성하겠습니다.

class User {
  final int id;
  final String name;

  User({required this.id, required this.name});
}

class UserService {
  Future<User> fetchUser() async {
    // API 호출 및 데이터 반환
  }
}

Provider 선언 및 사용하기

이제 Provider를 사용하여 데이터를 관리하고 API를 호출할 수 있습니다. 먼저, ChangeNotifier를 상속한 Provider 클래스를 작성합니다.

class UserProvider extends ChangeNotifier {
  User? _user;
  UserService _userService = UserService();

  User? get user => _user;

  Future<void> fetchUser() async {
    _user = await _userService.fetchUser();
    notifyListeners();
  }
}

그 다음, 앱 전체에서 Provider에 접근할 수 있도록 main.dart 파일에서 MultiProvider를 이용하여 Provider를 설정합니다.

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => UserProvider()),
      ],
      child: MyApp(),
    ),
  );
}

이제 필요한 화면에서 Provider.of나 Consumer를 사용하여 데이터를 호출하고 업데이트할 수 있습니다.

final userProvider = Provider.of<UserProvider>(context, listen: false);

...

ElevatedButton(
  onPressed: () {
    userProvider.fetchUser();
  },
  child: Text('Fetch User'),
),

결론

Flutter 앱에서 Provider 패키지를 사용하여 API를 호출하고 데이터를 관리하는 방법에 대해 알아보았습니다. Provider를 이용하면 상태 관리에 용이하고, 코드를 간결하게 유지할 수 있습니다. Flutter 앱을 개발할 때에는 Provider를 적절히 활용하여 효율적인 상태 관리를 할 수 있도록 노력해보세요.