[Flutter] Flutter의 상태관리 - Provider

0. 상태관리란?

한 줄로 요약하자면 사용자의 인터페이스와 애플리케이션의 데이터가 일관되도록 유지하는 것, 이라고 한다.

단순하게 생각하면 사용자가 애플리케이션을 사용할 때 사용되는 데이터, 사용자의 입력, 서버 응답,  UI 상태 등을 관리하는 방법이 상태관리인 셈이다.

 

그렇다면 이 상태관리라는 것이 필요한 이유는?

데이터가 변경되어도 페이지가 재렌더링되지 않도록 하기 위함도 있지만, 상태들이 복잡하게 얽혀 있을 경우 UI의 변경 상태를 알 수 없기 때문이다.

 

- 상태 (State)

• 임시 상태
  : 상태 관리 기법이 필요 없는 체크 표시와 같은 것을 위젯 차원에서 해결하여 UI에 변화가 생기게 하는 데이터
• 앱 상태
  : 앱의 여러 곳에서 공유되거나 세션 간에 유지하고 싶은 상태의 데이터

임시 상태의 경우, State와 setState만으로 구현이 가능하지만, 앱 상태의 경우는 상태 관리 라이브러리를 사용하여 효율적으로 관리를 하는 것이 좋다.

 

 

1. Provider 

Provider 는 Flutter에서 사용하는 상태 관리 라이브러리 중 하나이다.

Riverpod의 기반이 되는 라이브러리이기도 하며, 처음 나왔을 때 획기적인 상태 관리 솔루션으로 관심을 많이 받았다고 한다.

Flutter 공식 문서에서도 상태 관리에 대해 Provider을 기반으로 설명하고 있다.

 

여러 위젯에 상태를 전달해야 하는 경우, 상위 위젯에서 하위 위젯으로 계속 전달해야 하는데, 이 과정에서 코드가 지저분해지고 비효율적인 로직이 그려질 수 있다.

이러한 문제를 해결하기 위해 Provider가 설계되었다고 한다.

 

2. Provider의 주요 개념

• ChangeNotifier
  • Flutter에서 제공하는 클래스 중 하나로, Provider와 주로 함께 사용된다
  • 변경이 일어날 때 리스너들에게 알리는 역할을 한다
• ChangeNotifierProvider
  • ChangeNotifier을 제공하는 Provider로, 위젯 트리에서 ChangeNotifier의 인스턴스를 만들고 관리한다
• Consumer
  • Provider를 구독하고, Provider에 의해 제공되는 상태가 변경될 때마다 UI를 재빌드하는 역할을 한다
• Provider.of<T>
  • 특정 유형의 Prover를 찾는 메서드로, 제공되는 상태에 접근할 수 있도록 해 주는 역할을 한다

 

3. Provider 사용 (example)

1. flutter 프로젝트 생성

flutter create provider_example

 

2. provider 패키지 설치

flutter pub add provider

 

3. Class 정의

// counter.dart

import 'package:flutter/cupertino.dart';

class Counter with ChangeNotifier { // 상태 관리
  int _count = 0; // 현재 카운트 값 저장

  int get count => _count;

  void increment() { // _count 값 증가 메서드
    _count++;
    notifyListeners(); // 리스너들에게 변경 알림
  }
}

 

4. Screen 생성

// counter_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_example/counter.dart';

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('클릭 횟수'),
            Consumer<Counter>( // Counter의 상태를 구독하고, 상태가 변경될 때마다 UI 재빌드
              builder: (BuildContext context, counter, child) {
                return Text(
                  '${counter.count}',
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Provider.of<Counter>(context, listen: false).increment(), // 상태 업데이트, listen이 false로 해당 context에서 상태 변경 리스닝 X
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

5. main.dart 수정

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_example/screen/counter_screen.dart';
import 'counter.dart';

void main() {
  runApp(
    ChangeNotifierProvider( // Counter 클래스의 인스턴스를 위젯 트리에 제공 및 상태 공유
      create: (context) => Counter(),
      child: MyApp(),
    )
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterScreen(),
    );
  }
}

 

6. Result

 

1. 버튼을 클릭할 때마다 count가 증가하는 메서드를 호출하고

2. 메서드 내에서는 증가한 count를 변수에 저장하면서

3. 저장된 변수는 UI가 재빌드되면서 업데이트된다.

 

---

참고

• https://studiodoc.tistory.com/173

Description of Flutter's state management library provider for beginners (입문자를 위한 Flutter의 상태관리 라이브

• https://1986hz.tistory.com/150

플러터] 상태 관리 (State management)

• https://docs.flutter.dev/data-and-backend/state-mgmt/simple

Simple app state management