[flutter] 플러터 프로바이더를 사용하여 실시간 데이터 갱신하기

22 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때, 프로바이더(Provider) 패키지를 사용하여 상태 관리와 데이터 전달을 간편하게 할 수 있습니다. 이번 글에서는 프로바이더를 사용하여 실시간으로 데이터를 갱신하고 화면에 반영하는 방법에 대해 알아보겠습니다.

1. 프로바이더 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

이후 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

2. 모델 클래스 생성하기

프로바이더를 사용하여 상태를 관리하기 위해 모델 클래스를 생성합니다. 예를 들어, 사용자 정보를 담는 User 클래스를 만들어보겠습니다.

class User {
  String name;
  int age;

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

3. 프로바이더 클래스 생성하기

이제 상태를 관리하고 데이터를 제공할 프로바이더 클래스를 생성합니다.

import 'package:flutter/material.dart';

class UserProvider extends ChangeNotifier {
  User _user = User(name: 'John', age: 30);

  User get user => _user;

  void updateUser(User newUser) {
    _user = newUser;
    notifyListeners();
  }
}

위 코드에서 UserProvider 클래스는 ChangeNotifier를 상속하고 있으며, User 타입의 상태를 관리합니다. updateUser 메서드를 통해 사용자 정보를 업데이트하고, notifyListeners를 호출하여 위젯에 변경 사항을 알립니다.

4. 프로바이더 사용하기

이제 프로바이더를 사용하여 데이터를 실시간으로 갱신하는 방법을 알아보겠습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('프로바이더 예제'),
      ),
      body: Center(
        child: Consumer<UserProvider>(
          builder: (context, userProvider, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('이름: ${userProvider.user.name}'),
                Text('나이: ${userProvider.user.age}'),
                ElevatedButton(
                  onPressed: () {
                    User newUser = User(name: 'Alice', age: 25);
                    userProvider.updateUser(newUser);
                  },
                  child: Text('정보 업데이트'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위 코드에서 Consumer 위젯을 사용하여 UserProvider를 구독하고, 데이터가 변경될 때마다 화면을 자동으로 갱신합니다. 버튼을 누를 때마다 updateUser 메서드를 통해 사용자 정보를 업데이트하고 화면에 반영됩니다.

프로바이더를 사용하여 실시간으로 데이터를 갱신하는 방법에 대해 알아보았습니다. 이를 통해 플러터 앱에서 상태를 효과적으로 관리하고 화면을 업데이트할 수 있게 되었습니다.

더 많은 정보는 프로바이더 패키지 문서를 참고하시기 바랍니다.