[flutter] 플러터 프로바이더를 사용하여 원격 데이터 가져오기

22 Dec 2023

flutter

Flutter 앱을 개발하다 보면 원격 API로부터 데이터를 가져와야 하는 경우가 많습니다. 이를 위해 Provider 패키지를 사용하여 상태를 관리하고, 원격 데이터를 효율적으로 가져올 수 있습니다.

이번 글에서는 Flutter 앱에서 Provider를 사용하여 원격 데이터를 가져오는 방법에 대해 알아보겠습니다.

1. Provider 패키지 가져오기

먼저, pubspec.yaml 파일에 다음과 같이 Provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2

그리고 터미널에서 아래 명령어를 실행하여 패키지를 가져옵니다.

flutter pub get

2. 모델 클래스 생성

다음으로, 가져올 데이터의 형식에 맞게 모델 클래스를 만듭니다.

class RemoteData {
  final String name;
  final int age;

  RemoteData({required this.name, required this.age});
}

3. 데이터 제공자(Provider) 생성

이제 Provider를 통해 원격 데이터를 가져올 객체를 생성합니다.

import 'package:flutter/material.dart';

class RemoteDataProvider with ChangeNotifier {
  RemoteData? _data;

  RemoteData? get data => _data;

  Future<void> fetchData() async {
    // 원격 API로부터 데이터 가져오는 로직
    // ...

    // 가져온 데이터를 _data에 저장
    _data = RemoteData(name: 'John', age: 30);

    notifyListeners();
  }
}

4. 화면에 데이터 표시

마지막으로, 화면에 데이터를 표시하고 Provider를 통해 데이터를 가져오는 방법을 살펴봅니다.

class RemoteDataScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Remote Data Example'),
      ),
      body: Center(
        child: Consumer<RemoteDataProvider>(
          builder: (context, dataProvider, _) {
            if (dataProvider.data == null) {
              return ElevatedButton(
                onPressed: () {
                  dataProvider.fetchData();
                },
                child: Text('Fetch Data'),
              );
            } else {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Name: ${dataProvider.data!.name}'),
                  Text('Age: ${dataProvider.data!.age}'),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

위의 예제에서는 Consumer 위젯을 사용하여 Provider를 구독하고, 데이터를 가져와 화면에 표시하고 있습니다.

이제 위의 예제를 참고하여 Flutter 앱에서 Provider를 사용하여 원격 데이터를 효율적으로 가져오는 방법을 익힐 수 있습니다.