Flutter Checking Continuously Internet Connection using BLoC

Hi, I explained this topic in my article that I published 2 years ago. Flutter community working hard so something changed :). I recently received a “not working for me” response from those who were unaware of these changes so I decided to write this post’s updated version.

If you are interested in bloc you know that, for +8.x versions of the bloc package, mapEventToState replaced with on<Event>. In other words, the codes in the old article throws error due to this replacement. Also after publishing this article, Flutter announced the “Null Safety” concept and the package I mentioned in my old article didn’t support null safety.

Considering all these, I want to publish this article’s up-to-date version. Let’s do this :)

Coding

If you’re working with iOS 14+, you need to add the ‘NSBonjourServices’ key to your Info.plist for debug/profile mode.

Importing Packages

We will use 2 packets to listen to the network. These are BLoC & Connectivity Plus. The bloc package provides to use BLoC design pattern and we can listen for network changes with connectivity_plus package.

We can add them to the pubspec.yaml file with these commands:

flutter pub add connectivity_plus
flutter pub add flutter_bloc

and we should also run this:

flutter pub get

Creating Network Listener Class

Unlike my old article, we will listen network changes in a “Network Helper” class. Here it’s:

Let’s explain this. Actually, it’s very clear. With the connectivity_plus package we can listen network changes. In this changes, we take some actions according to them. When there is no connection we say “hey there’s no connection” to our BLoC via the NetworkNotify event. The isConnected parameter in NetworkNotify is false by default. When there is a connection we set it to true and inform our bloc in

NetworkBloc().add(NetworkNotify(isConnected: true));

line.

Creating BLoC Files

When creating a bloc, there are usually 3 dart files and they are event, state & bloc classes. Now we will create them. And we will use on<event> instead of mapEventToState when creating bloc class. I’ll call our bloc class NetworkBloc.

Let’s start with the easiest.

Network State Class :

There are 2 states in the network state: it’s connected or not. But to initialize the Bloc, we should add the initial state. In this case, there will be three cases.

Here’s what state class looks like:

Network Event Class:

All we do here is start listening for network status and emit current network status. Therefore, we need only 2 event classes (except abstract class). This is our event class:

With the “NetworkObserve” event we’ll start listening for network changes in NetworkHelper.

NetworkNotify event provides us to emit status based on network status sent by NetworkHelper. (We will investigate them in bloc class.)

(According to naming conventions in bloc documentations events should be named in the past tense. Although I consider these, I’d like to named as in the above. Maybe you want to know this :) )

Network Bloc Class:

Now we can create our bloc class. Here it’s:

When we create a provider to use bloc we will add NetworkObserve event to start listening immediately (with cascade operator in main.dart). As you can see we are triggering the _observe function on the “NetworkObserve” event.(For functions triggered by events, we need to specify event and emit parameters.) And _observe function calls the NetworkHelper’s observeNetwork method we mentioned in above.

When the bloc receives the NetworkNotify event triggered by the network listener, it calls the _notifyStatus function. _notifyStatus is the point. So let’s explain this. As I mentioned before, the NetworkHelper class listens for network changes and notifies the bloc with the NetworkNotify event when a state change occurs.

In this case, we need to access isConnected parameter of the NetworkNotify event on bloc side. To do this, we must specify to the handler function the event whose fields we want to access. Otherwise we can’t access the isConnected field, at this point you can suppose we use generic type or we cast the event type from general to NetworkNotify. After doing this, we emit bloc states according to the isConnected parameter. If it’s true we can say network is connected or vice versa.

UI

Our interface will contain a simple Text widget. We will use BlocBuilder to show the BLoC States and to use builder we need to define BlocProvider.

Here is the world’s simplest UI’s code :D.

In this article, I attempted to explain the topic as simply as possible. But you can elaborate this, for example, creating a model and, if the network is connected, you can send a field that indicates the source, such as cellular or wifi in state class.

Result

You can access project on github.