46. [Flutter] Provider 상태관리

Provider

• Flutter Provider는 Flutter 애플리케이션에서 상태 관리를 용이하게 하기 위한 패키지 중 하나입니다. 
• Provider 패키지는 의존성 주입 및 상태 관리를 위한 다양한 기능을 제공합니다. 
• 주로 Flutter 애플리케이션에서 상태 관리를 효율적으로 처리하기 위해 사용됩니다. 

Provider 패키지의 주요 특징과 사용 방법은 다음과 같습니다:

1. 의존성 주입(Dependency Injection): Provider는 의존성 주입을 위한 간편한 방법을 제공합니다. 애플리케이션 전체에서 상태를 공유하거나 특정 위젯 트리에서만 사용하는 등의 다양한 의존성 관리 방식을 제공합니다.
   
   
2. 상태 관리: Provider를 사용하면 상태 관리가 간편해집니다. 애플리케이션에서 공유해야 하는 상태를 손쉽게 관리할 수 있으며, 상태의 변경을 통지받아 화면을 업데이트할 수 있습니다.
   
   
3. 다양한 Provider 종류: Provider 패키지는 다양한 종류의 Provider를 제공합니다. 예를 들어, ChangeNotifierProvider, StreamProvider, FutureProvider 등이 있어서 다양한 데이터 소스에 대한 상태를 효과적으로 관리할 수 있습니다.
   
   
4. BuildContext 활용: Provider는 BuildContext를 통해 현재 위젯 트리의 위치에 따라 상태를 적절하게 전달합니다. 이는 위젯 트리의 어디서나 쉽게 상태를 사용할 수 있게 해줍니다.

---

예시.

1. ChangeNotifier를 상속받는 class를 작성해줍니다.

예시로 2개를 생성해주었습니다.

Counter

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

• 카운트할 수 있는 int형  _count 변수를 생성해줍니다.
• count를 get하면 _count 값을 전달해줍니다.
• increment() 메소드로 _count++ 할 수 있도록합니다.
• notifyListeners(); 로 _count 값이 변했다는 것을 알려줍니다.

User

class User with ChangeNotifier {
  String _name = 'John Doe';

  String get name => _name;

  void changeName(String newName) {
    _name = newName;
    notifyListeners();
  }
}

• changeName(새로운 이름) 함수로 _name을 수정할 수 있도록 만들어줍니다.
• notifyListeners() 로  _name 의 값이 변경되었다고 알립니다.

---

2. ChangeNotifierProvider 에 들어갈 ChangeNotifer가  2개 이상일 경우 아래와같이 MutiProvider를 사용하여 providers: 속성에 List로 추가해줍니다. (Counter, User)

 

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Counter>(create: (context) => Counter()),
        ChangeNotifierProvider<User>(create: (context) => User()),
        // 다른 Provider들을 필요한 만큼 추가할 수 있습니다.
      ],
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

• MultiProvider를 MaterialApp의 부모 위젯으로 만들어줍니다.
• providers: 속성에 위에서 생성한 Counter, User를 추가해줍니다.

---

3. 하위 위젯에서 Provider를 사용하여 값을 이용하고 상태관리합니다.

 

myHomePage.dart

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    final user = Provider.of<User>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('MultiProvider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '${counter.count}',
              //'${context.watch<Counter>().count}',
              style: TextStyle(fontSize: 48),
            ),
            Text(
              'User: ${user.name}',
              //'${context.watch<User>().name}',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
          //context.read<Counter>().increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

사용 방법은 주석 표시한 것과 동일합니다. (주석이 최신버전)

• 리빌드 필요할 때 (주로 변수값을 다룰 때 사용)
  • context.watch() 
  • Provider.of(context)와 동일
    
    
• 리빌드 불필요할 때 (주로 메소드 호출 시 사용)
  • context.read 
  • Provider.of<T>(context, listen: false)와 동일