20191019

Flutter provider 1

이 글이 쓰인 시점에는 플러그인 메이저 버전이 3이었기 때문에 지금과 꽤 많은 차이가 생겼습니다. 

여기를 확인하세요.

provider package
provider cookbook
쉬운 한글 설명
StatelessWidget은 간편하게 쓰기에는 좋지만 SoC(Seperation of Concern) 측면에서 보면 약간 지저분해 보입니다. 딱 ui를 관리하는데 필요한 ephemeral state만 들어 있는게 보기에 좋습니다. 특히 app state를 콜백 함수를 이용해서 위젯 트리 안에서 끌어내리고 올리고 하기 시작하면 스파게티가 되기 쉽습니다.
참고 : google io’19 provider
그렇다고 글로벌하게 state를 사용하자니 OOP의 장점들이 사라지고 성능까지 저하됩니다.
provider에서는 app state를 프레임워크에서 관리하게 만듭니다. 데이터가 필요한 위젯에서만 데이터를 사용하게 해줍니다.

---

알아야 할 것들

데이터 접근만 필요한 경우 (UI 갱신 X)

• Provider
• Provider.of

---

데이터의 변화가 있고, 데이터의 변화를 UI에 반영해서 갱신해야 하는 경우

• ChangeNotifier
• ChangeNotifierProvider
• Consumer

---

그 외의 것들

• MultiProvider
• ProxyProvider
• StreamProvider
• FutureProvider
• Selector

---

1. Provider / Provider.of

Provider<type> : 데이터를 제공하는 쪽, (공식 문서에는 expose를 사용했다.) Provider.of<type> : 데이터를 받는 쪽
여기서 type은 주고 받을 데이터의 타입을 말합니다.
값 하나를 전달 할 때는 Provider<>.value 위젯을 사용합니다.

Provider

String data = "top secret";

Provider<String>.value(
  value: data,
  child: MaterialApp(
    home: Home(),
  )
)

복잡한 위젯을 전달할 때도 유용합니다. 여기서 builder에 전달된 생성자는 위젯 트리에 삽입될 때 단 한 번만 호출됩니다.

Provider<MyComplexClass>(
  builder: (context) => MyComplexClass(),
  dispose: (context, value) => value.dispose()
  child: SomeWidget(),
)

이렇게 Provider로 지정하면 위젯 트리 상에서 Provider의 자손 위젯 들은 이 값을 확인할 수 있습니다.

Provider.of

간단하게 값을 읽을 때는 Provider.of 를 사용합니다. Provider.of<type> 이 호출되면 이 위젯에서부터 위젯 트리를 따라 올라가면서 같은 타입의 Provider를 찾습니다.

예제 1

아래 예제를 보면 MyApp에 있는 Provider 위젯에서 data를 제공하고 Level2에 있는 Text에서 데이터에 접근하고 있다.

코드 보기

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

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

class MyApp extends StatelessWidget {
  final String data = '123123625'; // 위젯 간 주고 받을 데이터

  @override
  Widget build(BuildContext context) {
    return Provider<String>( // Provider, 또는 Provider<>.value를 사용해도 됨
      builder: (context) => data, // builder 속성으로 줄 데이터 지정
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text(data),
          ),
          body: Level1(), // go down
        ),
      ),
    );
  }
}

class Level1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Level2(), // go down
    );
  }
}

class Level2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(Provider.of<String>(context)), // 여기서 데이터를 사용 Provider.of
    );
  }
}

---

2. ChangeNotifier / ChangeNotifierProvider / Consumer

ChangeNotifier

ChangeNotifier 위젯은 Provider 패키지가 아니고 flutter:foundation 에 들어있기 때문에 별도의 import나 package get 이 필요없다.
어떤 데이터가 extends ChangeNotifier (또는 mixin ChangeNotifier) 가 달리면 다른 리스너들이 이 데이터를 구독하고 있다가 변화가 있으면 알림을 받을 수 있게 된다.

ChangeNotifier is optimized for small numbers (one or two) of listeners. It is O(N) for adding and removing listeners and O(N²) for dispatching notifications (where N is the number of listeners).

doc에서는 리스너를 많이 두지는 말라고 충고한다.
Provider에서 사용할 때는 모델 클래스에 걸어둔다.

ChangeNotifierProvider

CNP는 provider 패키지가 필요합니다.
ChangeNotifierProvider는 ChangeNotifier를 제공(또는 expose)하는 위젯이다.
약간 스마트한 Provider<ChangeNotifier> 라고 보면 된다.

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

CartModel 인스턴스가 필요없어지면 자동으로 dispose 하게 된다.

Consumer

CartModel이 CNP에 의해서 노출된 상태에서 Consumer를 사용할 수 있다. Consumer 위젯을 사용하기 위해서 필요한 유일한 속성은 builder 콜백이다.
이 콜백함수는 CN에서 notifyListener가 사용될 때 마다 호출되어서 Consumer 의 자손 위젯들의 build함수를 전부 호출한다.
매개변수를 3개 가지는데, 첫 번째는 context이고 두 번째는 CN의 인스턴스다. 세 번째 child는 최적화를 위한 옵션이다.

Foo(
  child: Consumer<A>(
    builder: (_, a, child) {
      return Bar(a: a, child: child);
    },
    child: Baz(),
  ),
)

위 예제에서 notifyListener() 가 호출되면 Bar 위젯만 다시 빌드된다.

Provider.of 2

결국 CNP도 Provider이기 때문에 Provider.of 로 CN 데이터를 받을 수도 있다. CN 에서 notifyListener() 메소드를 통해서 리스너들에게 알림을 보내면 Provider.of 에서도 받게 된다. 이걸 받을 지 말지를 결정하기 위해서 Provider.of<> 에는 listen 이라는 속성이 있다. 기본 값은 true이고, 이걸 false로 하면 notifyListeners의 영향을 받지 않는다.
결정적인 Consumer와의 차이는 build 함수가 없기 때문에 UI 갱신에 어려움이 있다. 그러니 UI를 갱신할 필요가 없고 데이터를 읽기(사용)만 할 때 Provider.of를 사용해도 좋다.

예제 2

TaskData CN에서 notifyListener가 호출되면 builder 콜백이 실행된다.

코드 보기

class TaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<TaskData>(
      builder: (context, taskData, child) {
        return ListView.builder(
          itemBuilder: (context, index) {
            return TaskTile(
                taskTitle: taskData.tasks[index].name,
                isChecked: taskData.tasks[index].isDone,
          },
          itemCount: taskData.taskCount,
        );
      },
    );
  }
}