Consumer

Problem with the provider

We’ve seen how to use the provider and how it behaves. But there is a little problem with how we use the provider to rebuild the UI. When we write the following line of code, it will listen to the change in the provider (CounterProvider) and call the build() method again, which essentially rebuilds the whole UI.

CounterProvider counterProvider =
    Provider.of<CounterProvider>(context, listen: true);

However, this is not the most efficient way. We want to avoid rebuilding the whole UI since rebuilding consumes resources, although Flutter is optimized enough for big apps or a screen that updates continuously. We want to rebuild that part of the UI where the change is tangible.

Implementation of Consumer

To solve this issue, we have a Consumer widget from the provider package. We just need to wrap those widgets that are changing with the Consumer widget.

Now, let’s look at the code and notice what has changed from before.