After learning about how to create Providers from the previous tutorial now we want to know how to read it using the first method the Consumer.

If you want to know how to read Providers with the ConsumerWidget or ConsumerStatefulWidget then you may want to check out this tutorial instead, otherwise, you can do it later.

Consumer is a Widget that it is already present on Flutter so it is not a special Widget, it allow us to read InheritedProviders.

IMPORTANT! DON'T CONFUSE IT WITH ConsumerWidget

Why we should use Consumer? Consumer will allow use to get the Ref object; As I've explained in the previous article, the .ref object is needed in order to call our providers, basically, no ref, no provider!

Consumer allow use to get this object simply and will not rebuild the entire Stateful or Stateless widget but only the part that we are interested in, and this is another advantage.

If you have 20 nested widgets and you need your provider only in the last then it is highly suggested that you use Consumer.

So the question that will come into your mind is...

How to use Consumer with Provider?

Really simple, you just have to wrap the widget that you want your data to be viewed on with a this Consumer Widget. I'll try to explain it better.

If you have a Widget that you know that will contain that Data from your provider, then you wrap this Widget with a Consumer.

Let's create one as example:

child: Consumer(
	builder: (
    	BuildContext context, 
        WidgetRef ref, 
        _
     ) {
            int myValue = ref.watch(myProvider);

            return Text('Some number $myValue');
      }
),

To see the full example on Github, check out this page.

So the Consumer must have a builder property that needs a callback function and gives us 3 parameters, the first one is the famous Context, the second one is our Ref of type WidgetRef, and the last one is the child, not the child that I was referring to but if you want to pass a child that does not have to be rebuilt on changes you can pass it as child and call it inside your body.

Now that we have defined our parameters we can use our ref inside our Function body. Finally we can read our provider!

Read providers with ref.watch()

There are few ways to read your provider, for now we are going to see ref.watch, then we can check other ways.

Ref.watch will  not only allow us to read providers but will allow use even to watch for changes, that means that everytime we update our state (If we use StateProvider or StateNotifierState that have state) our variable will change his internal state and update and will re-render tied to it; 

Later we are going to see this in more details in the next articles when we will talk about Providers with states, in our case, by simply using Provider we don't have any state!

With ref.watch the beutiful thing that the return type is the type that we want, for example if we return a int or string we can, it is not like the Provider Package.