When to use Provider.of<X> vs. Consumer<X> in Flutter

问题

I'm still wrapping my head around state-management techniques in flutter and am a bit confused about when and why to use Provider.of<X> vs. Consumer<X>. I understand (I think) from the documentation that when choosing between these two you would use Provider.of when we want access to the data, but you don't need the UI to change. So the following (taken from the docs) gets access to the data and updates the UI on new events:

return HumongousWidget(
  // ...
  child: AnotherMonstrousWidget(// <- This widget will rebuild on new data events
    // ...
    child: Consumer<CartModel>(
      builder: (context, cart, child) {
        return Text('Total price: ${cart.totalPrice}');
      },
    ),
  ),
);

Whereas, where we only need the data on don't want to rebuild with UI, we'd use Provider.of<X> with the listen parameter set to false, as below:

Provider.of<CartModel>(context, listen: false).add(item); \\Widget won't rebuild

However, listen isn't required and so the following will run too:

Provider.of<CartModel>(context).add(item); \\listener optional

So this brings me to a few questions:

1. Is this the correct way to distinguish Provider.of<X> and Consumer<X>. Former doesn't update UI, latter does?
2. If listen isn't set to false will the widget be rebuilt by default or not rebuilt? What if listen is set to true?
3. Why have Provider.of with the option to rebuild the UI at all when we have Consumer?

回答1:

It doesn't matter. But to explain things rapidly:

Provider.of is the only way to obtain and listen to an object. Consumer, Selector, and all the *ProxyProvider calls Provider.of to work.

Provider.of vs Consumer is a matter of personal preference. But there's a few arguments for both

Provider.of

• can be called in all the widgets lifecycle, including click handlers and didChangeDependencies
• doesn't increase the indentation

Consumer

• allows more granular widgets rebuilds
• solves most BuildContext misuse

回答2:

There should not be any performance concern by using it, moreover, we should use consumers if we want to change some specific widget only on screen. This is the best approach I can say in terms of coding practice.

 return Container(
    // ...
    child: Consumer<PersonModel>(
      builder: (context, person, child) {
        return Text('Name: ${person.name}');
      },
    ),
  );

Like in the above example, we only required to update the value of Single Text Widget so add consumer there instead of Provider which is accessible to others widget as well.

Note: Consumer or Provider update the only reference of your instance which widgets are using, if some widgets are not using then it will not re-drawn.

回答3:

The widget Consumer doesn't do any fancy work. It just calls Provider.of in a new widget, and delegate its build implementation to [builder]. It's just syntactic sugar for Provider.of but the funny thing is I think Provider.of is simpler to use.

Look at this article for more clearance https://blog.codemagic.io/flutter-tutorial-provider/

来源：https://stackoverflow.com/questions/58774301/when-to-use-provider-ofx-vs-consumerx-in-flutter