Hello everyone, my name is Alexander Durga
Hope you are fine. So in this video tutorial we will learn how to create an app that will continuously check for internet connection
and will show some specific screens when the internet connection is over
and show a pop-up when the internet connection is disabled or off
So let's get right into it. For that we need to have two packages
In our hotspot.yaml, it's connectivityplug and internetconnectionchecker. You can update the version of your current
Currently, these are the versions that I am using. And with that we will also have to go to the Android app and build our driver
And this is the main SDK version 10.19. So with that out, now run your app
And in the main.org file you can see that we have a material app
And inside it we are navigating to, we are passing status checker to this home constructor
Let's go to this definition. I think it's taking too much time
Now in this status checker, we are checking if the internet connection is enabled
then show the home screen. If it's not, then show a pop-up
So as you can see here, we are giving a screen subscription
Please device connected and show alert. So these are bootloaders. And as you can see here, we are using stateful digits
Because we want to automatically call this function getConnectivity. As you can see here, we have specified it inside init state
And this getConnectivity will do all the work for us. So whenever the connectivity changes
For example, when the user turns off or on the internet connection
then it will be updated or you can say that it will be called
So as you can see here, it is continuously listening to the status
So whenever the connectivity changes, then it will run it. So as you can see here, we are using the internet connection checker
It has connection. If the connection is true or not. And the result will be shown if device connected
The boot window that we have created. So now it will check if the device is connected
If the device is not connected. This exclamation mark represents its fault
If we are using it without this exclamation mark, like this, then the condition will be like if device connected is true
But for now, as you can see here, if device connected is false
If it is false, then run this body. If it is not, then run this earth body
So if device is not connected, means if the internet connection is disabled or turned off
then set the show alert Boolean values to true. And also show this dialog
This code is used to show the alert dialog. And one point is that we have specified a barrier dismissable from system to fault
It is a Boolean value. And by specifying this code, we mean that we don't want this alert dialog to be visible
So now when the user clicks on the border or barrier of this alert dialog, then it will just disappear
But we don't want that. We want to show the alert dialog box until the user turns the internet connection on
So just make sure to specify it false. And now if the device is connected, if the internet connection is turned on
then still this earth block will be executed. And inside it, as you can see here, we have another exclamation mark
If show alert is true, means if the alert dialog is on the screen
As you can see here, we have specified it here. We have specified it true
If it is true, then only navigate, I use this navigator.off, context.off, then only close it
If it is not, then if it is already closed and we are running this, then it will navigate back to the previous screen
Which we don't want. We just want to use this statement to close this show dialog
So also use this rest state to change text. So hope you now have a clear idea of how this is working
And also you can see that, just to remember, that all this cancels the subscription
So it's better to use it in the default. So now, let's now run it
And as you can see here, just to save time, I have already run this
Yes, this is all app. And as you can see here, let's now, ok this internet connection is on
Let's now restart it and see what happens. As I have done some modification in it, so let's now restart it
Ok, now it's restarted. You can see that I forgot to mention about the screen
This chat screen and home screen, these are just two simple screens that we are using
And go to chat, it will just navigate to the chat screen
And as you can see here, this is the chat screen and back to home screen, it will navigate back to the home screen
Let's now try to disable this internet connection. As you can see here, this alert is now turned on
And if you click on any part of the home screen, it is not disabling or not closing, which is what we want
So, we want to show this dialogue box, when the internet connection is off
Let's now turn it on again. Ok, wait a second, it's connecting
Yes, it's connected. And you can see here, this screen is now, the alert is popped out
So, as you can see here, when the internet connection is up and running, then it will show us these two, home or chat
And if it is down, or if it is closed, then it will just show this
This is what we want. So, this is how we can easily and continuously check the internet connection status and show some specific screens according to it
So, hope you now have a clear idea of how it is done
I will also give the github link, github repository in the description
So, you can check that out as well for complete source code
Thank you for watching this video. Allah Hafiz