How to check internet connection in Flutter | Flutter Connectivity Plus

welcome to my channel in this tutorial I will be showing you how to check network connectivity in your flutter application before we start don't forget to subscribe to our channel for more AI news and flutter tutorial in today's tutorial I will be using this connectivity plus flutter package that you can find in pub.dev next get the latest package dependency version from installing and add it into your flutter project to prevent any version conflict make sure you are using the same environment as decay as mine so here I have created a simple flutter application that has only a text widget and an activated Button as you can see in the simulator while I have also created a string variable called network type to be displayed in the text widget this string variable will be responsible to store and display the network type now I will be creating the check network connectivity function this function is a synchronized function and it will return a string value so it will be a future string type in order to get the network type we have to execute check connectivity function from the connectivity package instance and the result will be stored into a final connectivity result variable and this is how we call the check connectivity function so the function will return the connectivity result type and it's an enum value from the return in on value we can add if statement to check which type of network result is returned and I will return specific string message for this tutorial one of the biggest popularity of this connectivity package is that it detects majority of networks such as Bluetooth ethernet mobile data and Etc so now I will show you each available Network types by checking one by one in the if statement for tutorial purposes this check app connectivity function will just return a string value and for each network type I will return a specific string to determine the net type for display here I will check all types of network you can select whichever network type that requires in your application this network connectivity package will detect no network connection as well which the enum type is none and now I have completed the if check statement however because this function have to return a string value So Below I will just return a not connected string value this is because if the network type doesn't fit any of the if condition above it's most likely offline now the check app connectivity function is ready in use we just have to add this function into the on press function of the elevated button that we have created and because this check app connectivity function is an asynchronized function so in flutter we cannot assign the function to a variable instead we have to execute the function and retrieve the return string value from dot then function and this value variable will contain the return string value that we have assigned to each Network types in the function once I got the return string value I have to update the network type variable with the return shrink value to be displayed in the text widget don't forget to wrap with set State function else the UI won't refresh now let's try it out in the simulator as you can see in the simulator when I click on the elevator button it executed the check app connectivity function and returned Wi-Fi network string to the text widget for display it means currently my simulator is connected to a Wi-Fi network so this is how you retrieve network connectivity type in your flutter application however this is a one-time retrieval function which you can only get the network status whenever the function is executed in the case where you wanted to keep track of the application Network status this way of implementation is not preferable to achieve that instead of retrieving the network value from the function call I will show you how to listen to the network value on change firstly we have to create a stream subscription in short stream subscription refers to the process of listening to and receiving a synchronized data emitted from a stream a stream is a sequence of a synchronized events that can represent and a continuous flow of data such as user input Network response or other data sources flutter provides the stream API as part of its reactive programming support allowing developers to handle a synchronized data in a more efficient and responsive manner coming back to the code we should start listening to the network value when the app just started so we have to add The Listener in innate State this connectivity package provides a stream method called on connectivity change which we can listen to and this stream method will execute whenever the connectivity State changes and this listener will return a connectivity result enum this enam is the same as the function return value that we have created just now here we can also add an if statement to check the network status in this implementation I will just check if it's connected to mobile network or Wi-Fi network it will print out online else it will print out offline to the terminal so now whenever there is a changes in the connectivity result it will notify the stream subscription variable at this point we have completed the implementation now let's try it out in the simulator so as you can see when I restart the application and the app rebuild then it printed out online in the terminal without any action needed because the app is listening to the connectivity result value right now the simulator is connected to Wi-Fi network I will now disconnect Wi-Fi connection and reconnect let's see what will happen so as you can see in the terminal it printed out the network status changes conclusion this is how you keep track of network connection in your flutter application you can either retrieve the network type value once or keep track on the value by listening to the stream method here comes to the end of the tutorial if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 2,694

Keywords: connectivity plus flutter, flutter tutorial, flutter course, flutter course full tutorial for beginners, flutter tutorial for beginners, flutter connectivity plus, flutter check connection internet, flutter check connection status, flutter check connection, check connection in flutter, check internet connection in flutter, flutter internet connectivity check, flutter internet connection checker, flutter connectivity plus example

Id: YNhCZKgQvvc

Length: 8min 8sec (488 seconds)

Published: Wed Aug 16 2023