플러터 Provider 사용법

플러터에서 상태(State)를 부모에서 자식으로 전달하는 과정은 처음에는 간단해 보여요. 하지만 앱이 복잡해질수록 여러 단계의 위젯을 거쳐야 하고, 이를 일일이 setState로 관리하는 것은 매우 번거로워져요. 특히, 여러 개의 페이지에서 같은 데이터를 공유해야 하는 경우 setState만으로는 한계가 생겨요.

이런 문제를 해결하기 위해 Flutter에서는 Provider 패키지를 사용하면 훨씬 편리하게 상태 관리를 할 수 있어요. Provider는 전역 상태를 관리하는 기능을 제공하며, 부모-자식 관계를 거치지 않고도 데이터를 쉽게 공유할 수 있도록 도와줘요.

이번 글에서는 Provider의 기본 사용법을 단계별로 정리해볼게요. 패키지 설치부터 상태를 저장하는 Store 클래스 만들기, 전역 변수 관리, 그리고 변수를 수정하는 방법까지 하나씩 알아보도록 할게요.

 

---

pubspec.yaml에 라이브러리 다운로드 받는 법

Provider를 사용하려면 먼저 패키지를 프로젝트에 추가해야 해요. 플러터에서 외부 라이브러리를 추가하려면 pubspec.yaml 파일을 수정해야 해요.

1. 프로젝트의 pubspec.yaml 파일을 열고, dependencies 섹션에 provider 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.2  # 작성일 기준 최신 버전

 

2. 터미널에서 다음 명령어를 실행하여 패키지를 다운로드하세요.

flutter pub get

 

이렇게 하면 provider 패키지가 설치되고, 플러터 프로젝트에서 사용할 준비가 완료돼요.

 

---

Provider 기본 사용법

Flutter에서 Provider를 사용하면 부모-자식 간의 상태 전달 없이 앱 전역에서 데이터를 공유할 수 있어요. 이번에는 가장 단순한 방식으로 Provider를 설정하는 방법을 알아볼게요.

 

1) Provider로 앱 감싸기

먼저, main.dart에서 ChangeNotifierProvider를 사용해 앱을 감싸고 상태를 전역적으로 관리하도록 설정해야 해요.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_store.dart'; // Store 클래스 파일

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterStore(), // Provider 등록
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

ChangeNotifierProvider로 CounterStore를 감싸서 앱 전체에서 사용 가능하게 했어요. 그리고 child: MyApp()으로 앱의 최상위 위젯을 감싸기 때문에, CounterStore의 상태를 어디서든 사용할 수 있어요.

 

2) 상태를 저장할 Store 클래스 만들기

이제 CounterStore 클래스를 만들어서 앱에서 사용할 상태(변수)를 저장해 볼게요.

import 'package:flutter/material.dart';

class CounterStore extends ChangeNotifier {
  int _count = 0; // 내부적으로 관리하는 변수

  int get count => _count; // 외부에서 값을 가져올 때 사용
}

_count는 private 변수로, 외부에서 직접 수정할 수 없도록 만들었어요. 대신 get count를 사용해 읽기 전용으로 값을 가져올 수 있도록 했어요.

 

3) UI에서 Provider 상태 가져다 쓰기

이제 CounterStore의 상태를 UI에서 가져와서 표시하는 방법을 알아볼게요.

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int count = context.watch<CounterStore>().count; // Provider에서 값 가져오기

    return Scaffold(
      appBar: AppBar(title: Text("Provider 기본 예제")),
      body: Center(
        child: Text(
          "현재 값: $count",
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

context.watch<CounterStore>().count를 사용하면 Provider에서 값을 가져올 수 있어요. watch<T>()를 사용하면 값이 변경될 때 UI가 자동으로 업데이트돼요.

 

하지만 지금은 상태를 변경할 수 있는 방법이 없어요. 이제 버튼을 눌러 상태를 변경하는 기능을 추가해볼게요.

 

---

상태를 변경하는 함수 만들기

이제 CounterStore에 상태를 변경할 수 있는 함수를 추가해볼게요.

 

1) 상태를 변경하는 함수 추가하기

CounterStore에 increment() 함수를 추가해서 count 값을 변경할 수 있도록 만들어요.

import 'package:flutter/material.dart';

class CounterStore extends ChangeNotifier {
  int _count = 0; 

  int get count => _count; 

  void increment() {
    _count++; // 값 증가
    notifyListeners(); // 변경사항 알림
  }
}

increment() 함수에서 _count 값을 증가시키고 notifyListeners()를 호출했어요. notifyListeners()는 이 클래스를 구독하는 모든 UI에 변경 사항을 알려줘서 화면을 자동으로 갱신해요.

 

2) 버튼을 눌렀을 때 상태 변경하기

이제 UI에서 버튼을 누르면 count 값이 증가하도록 변경해볼게요.

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var store = context.watch<CounterStore>(); // 상태 가져오기

    return Scaffold(
      appBar: AppBar(title: Text("Provider 기본 예제")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "현재 값: ${store.count}",
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => store.increment(), // 상태 변경
              child: Text("숫자 증가"),
            ),
          ],
        ),
      ),
    );
  }
}

context.watch<CounterStore>()로 store를 가져와서 count 값을 사용했어요. 버튼을 누르면 store.increment()가 실행되면서 값이 증가해요. 이때 notifyListeners() 덕분에 UI가 자동으로 업데이트돼요.

 

---

마치며...

Provider는 Flutter에서 가장 많이 사용되는 상태 관리 방법 중 하나예요. setState()만으로 상태를 관리하기 어려운 경우, Provider를 사용하면 부모-자식 관계를 거치지 않고 전역적으로 상태를 공유할 수 있어요.

 

1. ChangeNotifierProvider로 앱을 감싸면 상태를 전역적으로 사용할 수 있어요.
2. ChangeNotifier를 상속받은 Store 클래스를 만들어 상태를 저장해요.
3. context.watch<T>()를 사용해 데이터를 가져오고, notifyListeners()로 UI를 업데이트해요.

이제 Provider를 활용해서 좀 더 깔끔하게 상태를 관리해보세요!