Network-Aware Flutter Application using Provider and Data Connection Checker

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.

Required Plugins:

data_connection_checker: ^0.3.4
provider: ^4.1.1

Implementation:

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.

data_connectivity_checker.dart

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.

Wrap your parent widget with StreamProvider

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.

App Home Page with Data 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.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store