Check for Network Connection using Connectivity Plus | Flutter

almost every mobile application requires either mobile data or Wi-Fi connection to function properly so it is an important aspect of the application one important package that helps us discover network connectivity and configure the application accordingly is the connectivity plus package it can also be used to distinguish between Wi-Fi connections and cellular data connections to check for internet connection using the package we can first start by adding a button therefore I have added a simple check connection button to the application which when pressed will call the connectivity plus Singleton instance to get the connectivity result using the check connectivity method now we can use this method to Simply configure our application accordingly in this case I have added a check connectivity method which takes a connectivity result as an argument and in the state of our application I have created the check connectivity method and using a switch case I can now check for the two main results which we need which are to check for the connectivity results if it's mobile and in it I have set a status text and also a status color and I will also check the connectivity result. WiFi and in it I have also set the status text and the status color and finally in the switch case I have set the default value finally to display the values we can use a custom widget for which I have created an App container widget and now I will set the color to status color and the text to status text now with that saved we can see that when we press the button the app shows that we are connected in this case we are connected to a Wi-Fi network and if we change from a Wi-Fi network to just mobile data and we come back and press the button again we will see that we are now connected to a mobile network in real life applications we may never see a button to to tap and check for internet connection but we will have applications that constantly listen for changes in the network and react accordingly we can easily achieve this using this same connectivity plus package to do this first we create a stream subscription variable called connection subscription next in the unit State method we then listen to the on connectivity changed stream exposed by the connectivity plus package which returns a connectivity result and in it we then simply return the check connectivity method which we have created earlier here finally properly dispose of your stream subscription using the dispose method now after a hot restart we can see that the status text and the status color change accordingly as the network connection is changed now if I come here and change the connection from Wi-Fi to just mobile data we can see that it has automatic ially changed to the mobile network and if I do the same for just only Wi-Fi we can see that it has changed automatically back to Wi-Fi network the connectivity plus package has some limitations one limitation is that it is not reliable for checking whether your device is connected to the internet be it mobile or Wi-Fi it can only just show you whether you're connected to a mobile network or a Wi-Fi network to solve this we can use the internet connectivity checkup package here so after adding the internet connectivity checkup package to your application we can first start by creating a stream subscription for the internet subscription in the state of our application and also we will create a has internet connection flag which will be used and then we can initialize it to force next in the uni State method we can then listen to the on status change stream exposed by the internet connectivity Checker package which then returns an internet connection status and inside the listener we then first of all check if the internet is connected using the status and then we then set the flag to the value also don't forget to properly dispose of your internet subscription variable finally add the custom widget which we have created therefore I have added my app container widget first of all we check if there's an internet connection I set the color to Green otherwise red and then I also set the text using the internet connection flag accordingly now after I H restart we can see that our application has updated and we have an internet connection and if I come here and I turn off the internet connection for both Wi-Fi and mobile data we can see that the application has updated

Channel: Coding With Flutter

Views: 2,347

Keywords: check internet connectivity in flutter, check internet connection in flutter, check connection in flutter, internet connection checker flutter, flutter connectivity plus example, flutter connectivity plus, flutter connectivity stream, flutter check connection internet, flutter connectivity_plus, flutter internet connection checker, flutter internet connectivity check, flutter connectivity plugin, connectivity_plus, flutter connectivity, flutter check connection status

Id: IDVvlClMTBc

Length: 4min 53sec (293 seconds)

Published: Wed Feb 21 2024