Network-Aware Flutter Application using Provider and Internet Connection Checker

Network Aware Flutter Application using Provider and Internet 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.

Update on 03–10–2021 Earlier, In this article I used Data Connection Checker plugin, but author not updated the plugin to support null safety. so we are going to use Internet Connection Checker plugin.

But Internet Connection Checker plugin working well with all the situations.

Required Plugins:

internet_connection_checker: ^0.0.1+2
provider: ^6.0.1

Implementation:

Internet Connection checker plugin have stream for internet connection changes, we are going to use this stream with Provider’s StreamProvider.

Wrap your parent widget with StreamProvider and InternetConnectionChecker Stream. so that all the below widgets are able to listen to InternetConnection changes with the help of the Provider.

Everything is done, Now on every screen, we use Provider to check the Internet Connection status and based on the status we show or hide InternetNotAvailable Widget with the help of Visibility Widget.

App screen with Internet Connection Checking

I have written an InternetNotAvailable widget and used it on every screen.

Internet Not Available Widget

Screenshots:

App Screenshot

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

My Twitter and Stackoverflow Profile.

Credits: Dane Mackier

Dane Mackier website: FilledStacks

Dane Mackier YouTube Channel: FilledStacks, Dane making a lot of Good videos for Flutter Developers.