8.Flutter 상태 관리 – Provider 사용법

목표

Flutter로 앱을 개발하다 보면, 상태 관리를 효율적으로 처리해야 할 때가 많습니다. 이번 튜토리얼에서는 Provider 패키지를 사용해 간단하고 직관적으로 상태를 관리하는 방법을 알아보겠습니다.

1. State Management란?

Flutter에서 “State Management(상태관리)”란, 앱의 상태(데이터)를 관리하고, 해당 상태의 변화가 UI에 반영되도록 처리하는 과정을 말합니다. 간단한 앱에서는 StatefulWidget만으로도 충분할 수 있지만, 앱이 커질수록 코드가 복잡해지고 유지보수가 어려워집니다.

이때 상태관리 도구를 사용하면 더욱 효율적으로 상태를 관리할 수 있습니다. Provider는 Flutter에서 가장 널리 사용되는 상태 관리 도구 중 하나입니다.

2. Provider란?

Provider는 Flutter에서 상태 관리와 의존성 주입(Dependency Injection)을 간편하게 처리하도록 돕는 패키지입니다.

Provider의 주요 장점

1. 간단하고 직관적인 구조
2. Flutter 공식 권장 패키지
3. 다양한 상태 관리 방식 지원(예: ValueNotifier, ChangeNotifier 등)

3. Provider 설치 및 기본 설정

1. Provider 설치
   • pubspce.yaml 파일에 다음 코드를 추가합니다.

패키지의 최신 버전을 찾으려면 https://pub.dev 사이트에 접속 후 provider의 최신 버전을 찾을 수 있습니다.

이후 , 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

4. 기본 구조 설정

main.dart 파일을 열어 provider를 설정합니다. 여기에서는 “ChangeNotifierProvider”를 사용합니다.

//기본 구조 설정
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(), // 상태 관리 클래스
      child: MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

5. Provider로 상태 관리 구현하기

다음 소스코드는 상태를 읽고, 버튼 클릭시 상태를 변경하는 간단한 예제입니다.

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '현재 값:',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                '${counter.count}',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  counter.increment();
                },
                child: Text('증가'),
              ),
            ],
          ),
        ));
  }
}

5. 실행 결과

1. 앱을 실행니다.
2. “증가” 버튼을 누르면 숫자가 증가합니다.
3. UI가 즉시 업데이트되며, 상태 변경이 잘 반영되는 것을 확인할 수 있습니다.

6. 결론

Provider는 Flutter에서 간단한 상태 관리 요구 사항에 적합한 도구입니다. 추후 더 복잡한 상태관리가 필요하다면, Riverpod, Bloc, Redux같은 다른 패키지도 사용할 수 있습니다.

다음 튜토리얼

다음 시간에는 Flutter에서 네트워킹 및 API 호출에 대해 다룰 예정입니다.

감사합니다.