Hey guys, welcome to protocol.s point
In this Flutter tutorial, we gonna make use of Flutter provider to build an app
As you can see, I have already created Flutter project in my android studio
This is the default code given by Flutter team. I will just remove all this code
Here I will just add a container for timeframe. Afterward, we will write a code over here
So, what we are going to do is, first of all, we will build a simple app by making use of set state from Flutter
We will build a countdown timer. First of all, we have to create a new dart file and name it as home page
In home page, we need to import material.dart. After that, build a stateful widget and give name it as home page
Then use stateful widget and build a UI
Here we will create a variable
We will name it as remaining and set initial value to 10
Then we will just print here the content. I will move this
I will just run this app now to test the UI
In main page, we need to pass. In home page, we need to pass home page
As you can see, this is the UI design
That is by making use of stateful widget to countdown timer. Now we will do a countdown timing for this
In init method, what you need to do is
In init state, we will make use of timer to decrement the variable
We will decrement the duration per second
After every second, timer will work. In this method, we will decrement remaining by 1
This will update the UI. For that, we need to make use of set state property
Just inside the set state property, decrement this timer. Now we will rerun this app
As you can see now, timer is decrementing by 1. Then the problem with stateful set state method is
The complete UI gets updated
As you can see, I will just add a print statement over here
I will rerun this app now. As you can see here, the UI is getting updated every second
This is the best way to build any app. As you know that, building an app by making use of set state is not the best idea
Because set state property will rebuild the complete UI again and again
So we will just achieve this by making use of Flutter provider
The first step is, we need to add a dependency. First open the pub.yml file and here under dependency section, add provider
After adding the provider, just hit the pub.get. This will download all the packages of provider into your external project
After adding this, you can see that the success code is 0
After that, first of all, we need to create a data model from where the data will be fetched
For that, create a new Dart file and name it as timer data
In timer data, create a command that extends change notifier
Here first of all, we will create a variable that is timer rename
That will be set to any number. Then here, create a getter method that is getTime
That will return time. After that, we need to update the timer variable
For that, we will make use of method that is updateTime. In this method, we will decrement the timer name by minus one
Then we will make use of notifier listener. In this timer data, that's all
Then come back to main.dart file
Here we need to wrap this into another widget that is change notifier provider
Here we need to pass our instance of an object by using create
In create, we need to pass the data model context timer data
We are passing the data from main.dart file to the child of the change notifier provider that is home page
Now, come to home page. Here we will add another UI
First of all, we will create another timer for this provider
I will just copy paste the above code. In this second timer, we will create an instance of the data model
We will name it as timer info. This is the instance. We will make use of provider.of context timer data
We will pass the context and set the value to false
We need to import this provider. Now the instance of an object is being created
We can make use of instance to update the variable by making use of update timer object
To stop this timer function, we can make use of this timer to stop it
When we will stop it, the timer will get it to zero
For that, timer info.getTime is equal to zero
If it is equal to zero, then timer.cancel. This will stop the timer
Now we will make use of this instance in our UI. I will copy paste this
To give some gap between the widget, I will make use of size box with height of 50dp
I will just paste this over here. The text will be, you can name it as list provider
In text widget, we will print out this instance object
For that, we will make use of consumer
Consumer will be of type timer data
Build will be of type, will accept three types of parameters. That is first one is context, second one is actual data and third one is the site
This also accept to return in return statement
We will just return the widget, that is text
We will print the data, that is data.getTime and convert it into string
We are done. I will just rerun this app now. There is an error somewhere
I need to check out. Now restarting the app
As you can see, the provider is also functioning in the same functionality as set method
But the provider is not rebuilding the whole UI. It is just updating the consumer part as per second
Thanks for watching this video. Hope you understood what the concept was
Please do subscribe to Protocol Deskpoint