Flutter Connectivity Using StreamProvider

Nikhilsai Kapa
Francium Tech
Published in
3 min readAug 9, 2019
Source: https://www.developerlibs.com/2019/05/flutter-pragmatic-state-management-provider.html

In mobile application development, developing apps based on the user network connectivity and also managing the app state is very important.

Let’s see how these challenges are effectively managed by connectivity plugin and provider plugin using flutter.

Before getting started, lets see what is connectivity and provider.

What is connectivity ?

It is a flutter plugin for discovering the state of the network (WiFi & mobile/cellular) connectivity on Android and iOS.

To know more about connectivity plugin, please refer here.

What is Provider ?

It is a dependency injection system built with widgets for widgets. provider is mostly syntax sugar for InheritedWidget, to make common use-cases straightforward.

If you are new to provider concept, please go through this.

Then, what is StreamProvider ?

It is a kind of provider that listen to a stream and expose the latest value emitted.

StreamProvider<T>.value(
value: // the stream with return type T.
child: // the widget to be built based on stream value.
)

Let’s begin the show :

Let’s create a flutter app and add dependencies to pubspec.yaml file.

Dependencies

Now create a class NetworkProvider which contains the stream subscription for listening connectivity changes and stream controller to add the latest value of connectivity change so that the widgets based on that stream controller will rebuild accordingly.

NetworkProvider Class

Now add a constructor to the class NetworkProvider which instantiate the stream controller and start listening to the connectivity changes.

Network Provider Constructor

Now create a widget (that takes instance of NetworkProvider as param) in our main.dart file that depends on the value returned by the stream controller in NetworkProvider class.

Network Status Based Widget

Finally, include our NetworkStatusBasedWidget inside the Scaffold ( the descendant of Provider that instantiate the NetworkProvider )

Material App

Conclusion:

Thank you for reading the article.You can find the source code for the above app from my GitHub.

Final Result

Francium Tech is a technology company laser focused on delivering top quality software of scale at extreme speeds. Numbers and Size of the data don’t scare us. If you have any requirements or want a free health check of your systems or architecture, feel free to shoot an email to contact@francium.tech, we will get in touch with you!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in Francium Tech

Francium's core purpose is to create technology solutions for progressive and forward-thinking organizations to empower their ascendancy and to magnify their impact.

Written by Nikhilsai Kapa

Mobile Application Developer ( Flutter ) at Francium Tech

Responses (3)

What are your thoughts?