flutter - provider 상태관리

https://pub.dev/packages/provider

provider | Flutter Package

이번에는 flutter에서 대표적으로 쓰이는 상태관리 중 하나인 provider에 대한 예시를 들어보겠습니다

 

provider: ^6.1.1

먼저 pubspec.yaml에 위 코드를 추가하고 pub get을 해줍니다

 

다음으로 ChangeNotifier 인스턴스를 만들어 줍니다

import 'package:flutter/cupertino.dart';

class HomeProvider extends ChangeNotifier{
  int _count = 0;

  int get count => _count;

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

  void decrease(){
    _count--;
    notifyListeners();
  }
}

여기서 상태에 따라 변하는 변수와 변화 시켜주는 함수를 작성해 줍니다

함수에 notifyListeners()를 써줘야 변화를 알릴 수 있으니 잊지 말고 써주자

 

다음으론 위 인스턴스를 위젯에 전달해 줘야 한다

void main() {
  runApp(MultiProvider(providers: [
    ChangeNotifierProvider(
      create: (_) => HomeProvider(),
    ),
  ], child: const MyApp()));
}

여기서 MultiProvider를 사용해서 전달해서 말 그대로 앱에서 쓰는 모든 ChangeNotifier 인스턴스를 추가해 줍니다

 

Consumer<HomeProvider>(
  builder: (context, provider, child) => Text(
    provider.count.toString(),
  ),
),

인스턴스에서 선언한 count를 보여주는데 consumer로 감싼 위젯들은  increase, decrease 등 메서드가 호출될 때마다 re-build 되기 때문에 count가 올라가거나 내려가는 변화가 일어난다

 

GestureDetector(
  onTap: () {
    context.read<HomeProvider>().decrease();
  },
  child: Container(
    width: 100,
    height: 50,
    color: Colors.red,
    child: const Center(
      child: Text('decrease count!!'),
    ),
  ),
),

위는 눌렀을 때 decrese를 해주는 버튼인데 context.read를 통해서 호출해 준다

 

provider에는 read, watch, select 기능을 제공하는데

read : 상태값을 읽지만 변경을 감시하지 않는다

watch : 상태값을 읽고 변경을 감시한다

select : 상태값의 특정 부분만을 감시한다

 

read는 주로 increase, decrease 같은 함수를 호출할 때 주로 쓰이고, watch는 count 같은 상태값에 많이 사용된다

 

Text(
  context.watch<HomeProvider>().count.toString()
),

 

위처럼 단순히 count변수만 보여주는 거면 consumer로 안감 싸고 context.watch로만 표현해 줄 수 있다