Flutter 상태 관리 실습: Provider 활용

Provider는 Flutter에서 상태 관리를 간단하고 효율적으로 처리할 수 있는 패키지입니다.
이 글에서는 Provider를 활용해 상태 관리를 구현하는 방법을 실습 예제와 함께 알아보겠습니다.

---

1. Provider란?

Provider는 Google에서 권장하는 상태 관리 도구로, 의존성 주입(Dependency Injection)과 상태 관리를 간단하게 구현할 수 있도록 돕습니다. 이를 통해 데이터의 변경 사항을 UI에 자동으로 반영할 수 있습니다.

---

2. 프로젝트 설정

2.1 새로운 Flutter 프로젝트 생성

터미널에서 다음 명령어를 실행해 새 Flutter 프로젝트를 만듭니다:

flutter create provider_example
cd provider_example

2.2 Provider 패키지 추가

pubspec.yaml 파일에 다음 내용을 추가하거나 명령어로 패키지를 설치합니다:

dependencies:
  provider: ^6.0.0

설치 명령어:

flutter pub add provider

---

3. Provider를 활용한 상태 관리

3.1 상태 모델 정의

상태를 관리하기 위한 클래스를 생성합니다. 이 클래스는 ChangeNotifier를 상속받아야 합니다.

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // 상태 변경 알림
  }
}

3.2 Provider 설정

main.dart 파일을 수정하여 ChangeNotifierProvider로 상태를 제공하도록 설정합니다.

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

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

3.3 UI 구현

상태를 읽고 변경할 수 있는 UI를 작성합니다. Consumer 또는 context.watch를 사용하여 상태를 구독할 수 있습니다.

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.counter}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

---

4. 실행 결과

앱을 실행하면 + 버튼을 누를 때마다 숫자가 증가하는 것을 확인할 수 있습니다. CounterModel에서 notifyListeners()를 호출하면 상태가 변경되고, 이를 구독하는 위젯들이 업데이트됩니다.

---

5. 추가 팁

• MultiProvider: 앱에서 여러 상태를 제공해야 한다면 MultiProvider를 사용하세요.
• MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => CounterModel()), ChangeNotifierProvider(create: (context) => AnotherModel()), ], child: MyApp(), );
• Provider.of(): 특정 시점에 상태를 읽어야 한다면 사용 가능합니다.

---

6. 결론

Provider는 간단한 상태 관리부터 복잡한 상태 관리까지 유연하게 사용할 수 있는 강력한 도구입니다.
이를 활용하면 Flutter 앱의 유지보수성과 확장성을 크게 향상시킬 수 있습니다.

다음 글에서는 MultiProvider를 활용한 다중 상태 관리와 Provider의 고급 기능에 대해 다뤄보겠습니다.

---

참고 자료

• Provider 패키지: https://pub.dev/packages/provider
• Flutter 공식 문서: https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple