Hey Darling, Welcome to Protocol at Point
Ok, so in this particular tutorial we are going to implement how to check if your device
is connected to internet. And if your device is connected to internet, which type of network it is been using, whether
it is a WiFi or it is a mobile network. Ok, so to achieve this we are going to make use of a library called as connectivity machine
that helps us in doing this and for state management we are going to make use of gettx package
So let's begin. So here I have created a simple demo app for demonstration
So now you can see there is no internet and when I click on mobile data, you can see you
are connected to mobile internet and now I will just on my WiFi
Let it get connected. So you can see as soon as it got connected, you got a status in your app device, app that
you are connected to WiFi. So I will just off it now
So you can see no internet. So let's implement it. Ok, so let's go to our android studio IDE
So here I have created a new Flutter project by name getx check internet and I have removed
all the default code, the counter code that is being given by Flutter team while creating
new Flutter project and I have replaced the code with my own shapeful widget
For now it simply has a scaffold widget with a column and there is no any widget over here
We are going to add it now. Ok, so first of all just go to pubspecifications.yaml file and under dependency section over here
add a library that is get and second library we need that is connectivity
Ok, so add these two libraries. You can keep the version as empty
It will take the latest version. So after adding that just hit the pop that button
Ok, so now let's create a new file, dash file that is getx
I can name it as getx-network-manager. Ok so this dash file will manage our network state by making use of getx state management
Ok, so let's create a class and I will name it as getx-network-manager and getx extends getx-controller
Ok, so here we need two overriding methods. So just import it
The one is onImage and second one is onColors. We need both of these
Ok so this file will help us in getting our network state
So let's create some variables over here. Here I will just create a variable connectionType which is of type integer for initially we
will set it to 0. Ok, so we will use this variable in such a way that if it is 0 then it means that the
device is not connected to internet. If it is 1 then your device is connected to wifi and if it is 2 then your device is connected
to mobile data. Ok, so initially we will set it to 0 that is no internet connected and then here we
will create an instance of connectivity. Ok so this will help us in getting the type of connection that device is connected
So in your init method here onInit here we will just create a function
Now we can name it as getConnection type. Ok so let's create a method over here somewhere
Now we will just copy this method name and paste it over here and then in this method
we are going to create a variable, variable connection result, connectivity result
And then here we are going to make use of try and catch
So here we are going to make use of try and catch because sometimes the connectivity result
may fail to get the data in some platform android or ios or web
Ok so we are just wrapping it into a try and catch
So here connectivity result is equal to await and then here just make use of connectivity
dot check connection. Ok so as we are making use of await we must make this method as our synchronization
Ok and feature void. Ok so now we have the eqr device is connected to internet or not
Ok so I think we will just return from here, we can just return connectivity state or else
I will just create an update method connectivity result. Ok so we got our type of connection so we will just create one more method update state
that will check which type of data connection it is. So now here update update state connectivity result result
So now here we will make use of switch statement switch result
Here first stage we will check connectivity result dot if it is wifi, if it is wifi then
we will change our variable to one. Ok and then update the consumer of this variable
And then just break the case. Ok so we just copied the case
Now we change this connectivity result to mobile. If it is mobile then we are going to change it to two
If it is none then we are changing it back to zero and then update
So here it is showing me an error. So I need to just break the case
Ok and then we will just make use of default. Default means if there is an error in getting the data you can just close the mikibar
Mikibar network error. So we are done. Here what we are doing is we are solving this we are creating an instance of this from our
main.datacast we will do it now. And here what is happening is we have a variable to check if it is connected to internet, if
it is connected to wifi or if it is connected to mobile device
And then we have created an instance of connectivity of this library connectivity and by making
use of it we are just getting the type of connection and then simply we are passing
the result of this to another method. In this we have a switch statement if it is connected to wifi then we are changing the
data to one and then if it is connected to mobile then we are changing to mobile and
if it is connected to none means there is no internet then we are changing it back to zero
Ok so that is in this file. So let's go to main.datacast
So here we need to change this material as to get material
In this input get.dat package. So now here this method this widget needs initial binding
Ok so let's create a initial binding for this widget, create a new dart file and we will
name it as network binding then here we will just create a class network binding extend binding
Ok so now here you need to overwrite one method that is dependency and inside this you will
make use of gettext.lazyput and here we will put our gettext network manager
Ok and then you need to typecast this method so here you need to typecast to gettext network manager
Ok so now in your main.dat file you need to just call this network binding
Yes it is done so now whenever your app get restarted what will happen is your gettext
app manager will call network state and then network binding will get the data from this
network manager gettext network manager and this code will work. Ok and this network initial binding will just keep update of your network for example if
your network goes off and if you are connected to wifi and they get disconnected so this
network binding will get updated. Ok so now let's show our network status in our app UI so here I will just create a text
widget ok and then second widget what I need is I need to get this variable I need to use
this variable in our second widget so for that first of all we will just create an instance
of this page gettext network manager page. So for that final gettext network manager we will name it as network manager get.find
and what we need to find is our gettext manager that is gettext network state manager
Ok so now you can use this to fetch the data of this page now here what I will do is I
will just make use of gettext builder ok text widget inside this gettext builder I will
show a text widget that is $networkmanager.networktype ok so now let's restart our app
Ok sorry here I need to change the font size just restart our app again ok so I have just
added a typecasting over here just update it ok so our app is running so now you can
see the status is 0 so I will just connect to my mobile data so it is not getting updated
because we need to make use of one more code to update the status of your app so for that
here in gettext network manager here what we need to use is let stream subscription
and then here after this method here stream subscription is equal to connectivity.onconnectivitychange.resistance
and we need to call our update status method ok so now what is happening over here is whenever
our network state changes our update state gets called ok so I will just refresh the
app again ok I need to restart the app for that ok so our app got reinstalled so now
I will just change the status of the mobile data so you can see the status is 0 now I
will just connect to wifi so as soon as it gets connected your network state will get
updated that's great ok so as you see our mobile device is connected to network so you
can see the state it is 1 so 1 means it is connected to wifi ok so let's change the UI
so instead of showing simple number we will show some text message ok so for that here
network manager.connectivity if it is equal to equal to 0 then we will show a message
no internet if it is not connected if it is not connected if it has a connection then
it will start one more condition that is network manager.connectivitystate if it is equal to
1 that means if it is 1 that is it is connected to wifi ok and if it is not connected to wifi
then it means that it is connected to mobile data ok so let's restart our app ok so as
you see you are connected to wifi so I will just off the wifi so you can see no internet
so we just on the mobile data so you can see you are connected to mobile internet ok so
that's all for this video tutorial hope you got the concept of how to implement network
connectivity with gettech state management so please do subscribe protocolorders.thank you