Providerは、サブアセンブリの状態を管理するウィジェットであり、サブアセンブリの状態が変化すると、NotifyとしてUIが更新される.Listenerのすべてのサブウィジェットは、プロバイダにアクセスできますが、Providerに登録されているウィジェットのみが、その再構築および変更のステータスを反映します.
したがって、アプリケーションを設計する際に重要なのは、Listenerから構成されるべき部分を決定することです.また,どのWidgetがProviderに登録されて変更の状態を反映すべきか,どのWidgetがListenerに登録されて変更の状態を知らせるべきかを決定することも重要である.

ChangeNotifier

単純なCounter例によって、Notifierが各関係で構成されているかどうかを理解する.以下は構築時のWidget関係です.
ProviderのためにWidgetクラスを作成します.このカウンタはProviderを継承し、変化の状態(値)を定義する.すなわち、ChangeNotifierは、追跡が必要な状態をカプセル化する方法であり、サブスクリプション(subscribe)によって状態の変化を観察することができる.
登録されたステータスは、notifyListeners()メソッドによって実際のUIを変更します.

import 'package:flutter/foundation.dart';

// Counter class as Notifier
class Counter extends ChangeNotifier{
    int value = 0;
    void increment(){
    	value++;
        notifyListeners(); // Notify to Listeners
    }
}

ChangeNotifierProvider

次いで、ChangeNotifier WidgetをMyHomePage Widgetにカプセル化し、ChangeNotifierProvider<Counter>を構成する.このプロセスでは、以前に作成されたProviderの実際のファクタが生成されます.複数のChangeNotierから複数のインスタンスを作成するには、マルチプロバイダを使用する必要があります.

ChangeNotifierProvider<Counter>(
    builder: (context) => Counter(),
    child: MyHomePage(title: 'Flutter Demo')
)

構成されたProviderは、単純にProviderとして位置づけることができるが、これにより、現在のwidgetの下ですべてのサブwidgetを再構築することができ、パフォーマンスの低下をもたらす.

Consumer

特定のwidgetで登録ステータスを使用するには、そのwidgetの上部にProvider.of<Counter>(context) widgetを作成します.ConsumerサブwidgetはListenerとして登録され、状態が変化するとUIが再構築され更新される.

Consumer<Counter>(
    builder: (context, counter, child) => Text(
        '${counter.value}'
    )
)

リファレンス

Flutter Provider 101 on Youtube