Flutter Checking Continuously Internet Connection using BLoC and Stream
Hi all, I’ll talk about how to check continuosly internet connection on Flutter apps. When we are doing this we’ll use BLoC pattern and also stream.
You know it’s an important matter that check internet connection when you’re developing a mobile app. So to do it we need to listen changes in connection status and get the new status. We’ll use a Flutter package for do that.
Our purpose of using BLoC is receive changes in some status through events and return them into some states as results. And we’ll also use stream to listen changes in internet connection status and share them with BLoC using “add” method.
Coding
Importing Packages
There are 2 package that we’ll use. These are bloc and network packages. We add them to dependencies in our pubspec.yaml file.
After adding our packages we need to install our dependencies. So we run “flutter pub get” and complete install. Now we can use them by adding “import” statement.
Creating BLoC Files
Firstly let’s create our BLoC files. We will define state classes in network_state.dart, event classes in network_event.dart. Our BLoC pattern will be defined in network_bloc.dart.
Now let’s implement the BLoC architecture.
Network Event:
There are 2 event class we need. These are connectionListen and connectionChanged.
When our application starts we’ll start listening to our network status with connectionListen event, it’ll start a stream to listen changes occured in network status. Therefore we’ll use this event only once. We will trigger our ConnectionChanged event to update BLoC state according to the connection status after each change catched by the connection listener.
Network State:
Here, we have 3 states: ConnectionInitial, ConnectionFailure, ConnectionSuccess. ConnectionInitial is the initial state that will return after creating our network bloc until the next state returns. So our main states are ConnectionSuccess and ConnectionFailure. If we have an internet connection our state will be ConnectionSuccess and otherwise it’ll be ConnectionFailure.
Network Bloc:
There is our BLoC. Here we create a stream when ListenConnection event added. This stream listens changes in network through the data_connection_checker package. Therefore, if the change is about lost connection our state should be ConnectionFailure but if we get internet connection it should be ConnectionSuccess. So when there is any change in network status, we send the state to be yield according to this change as connectivity field value in the constructor of our ConnectionChanged event class. Then our BLoC yield this state when ConnectionChanged event is added.
UI
Our interface contains just a simple Text widget. Cause my main purpose is explain usage of BLoC and stream in this context.
Of course, we will use BlocBuilder to get output according to state. To use BlocBuilder, we should define BlocProvider. After creating our BLoC using BlocProvider, we add ListenConnection event to our it.
And it’s done. You can access the project codes here :)
