Network-Aware Flutter Application using Provider and Data Connection Checker
Hello, Flutter Developers today I’m going to share how to make your application aware of Network Connectivity.
This article is an extended version of Dane Mackier’s Build a Network Sensitive UI in Flutter using Provider and Connectivity If you are not reading that article go and read that first.
In the above article, Dane used Connectivity Plugin
Connectivity plugin will not work well with Wifi with no Internet Access. In pub.dev itself they mentioned
Note that on Android, this does not guarantee connection to the Internet. For instance, the app might have wifi access but it might be a VPN or a hotel WiFi with no access.
But Data Connection Checker plugin working well with all the situations.
create a service file called data_connectiviy_service.dart
Data Connection Checker plugin provides a stream for data connection changes. In our service file, we are creating StreamController and that StreamController will listen to all the DataConnectionChanges.
Now wrap your parent widget with StreamProvider and provide our newly connected stream. so that all the below widgets are able to listen to DataConnection changes with the help of the Provider.
Everything is done, Now on every screen, we use Provider to check the Data Connection status and based on the status we show or hide InternetNotAvailable Widget with the help of Visibility Widget.
I have written an InternetNotAvailable widget and used it on every screen.
That’s it. Now user can understand easily Data connection is disconnected. Thanks for reading my article. This is my first Technical Article. If you find anything wrong. please comment on it. I will update the article. If you Enjoyed this Article then do 50 clap for this Article. Share this article with your friends.
Source Code: Network-Aware Flutter Application
Credits: Dane Mackier
Dane Mackier website: FilledStacks
Dane Mackier YouTube Channel: FilledStacks, Dane making a lot of Good videos for Flutter Developers.