Listen To Internet Connection State In Flutter App

In this post, we will learn how we can update the app state according to the device’s network connection state in Flutter.

Introduction

In any app that requires internet connection, we must always check whether the device is connected with the internet or not. If there is no internet connection, user should be notified that the app needs to be connected with the Internet.

Also, app should be notified for the change in network connection state as well.

For getting this information about network state, Flutter team has created connectivity package.

Setup

Start by importing the connectivity package in your project by adding the dependency in your pubspec.yaml file.

The package provides a Connectivity class that can listen to connectivity change states via “onConnectivityChanged” method.

The “onConnectivityChanged” returns a Stream of “ConnectivityResult” and is defined as:

Our app should listen to the stream returned by “onConnectivityChanged” which should update the app state and then notify users accordingly.

In order to implement this, first import the package:

Next, listen to the Stream returned by the Connectivity class and update the app state accordingly:

Here, we are using the StreamBuilder widget to build the body. It basically listens to stream returned by Connectivity().onConnectionChanged method and rebuilds the body accordingly.

Listening To Internet Connection State In Between HTTP Requests

The example above is a simple illustration of how we can listen to internet connection state in a simple Flutter app. However, in a more complex app, you need to check for connection throughout the application.

Become A Flutter Expert With This Course

For example your application might be getting some data or posting via HTTP requests in multiple screens. This is a common scenario for most applications.

So how do you make sure there is internet connection before making any HTTP requests throughout the application?

Solution:

Here is one approach for the solution, which you could use.

  • Listen to connection state in the application’s root.
  • Create a handler that shows a “No Internet Connection” view.
  • Pass the handler along to the class that makes HTTP requests
  • Call handler if the HTTP request response throws SocketException.

For the above approach, start by creating a class ConnectionStatusSingleton which exposes connectionChange as a Stream.

Create Connection Status Notifier

Now we have something that we can rely on to check for internet connection state. Next, we need to subscribe to this state stream.

Subscribe To Notifier Stream

In your main.dart class where you have the application root widget, you should listen to the connection state change event.

Handle Internet Connection On/Off State

Now, the _updateConnectivity event gets fired whenever there is change in internet connection state.

Here, we make sure that if there is no internet connection and also if Fallback view is not currently pushed, only then we show the Fallback view. The Fallback view is simply a widget that shows “No Internet Connection” message for the user.

Similarly, if the connection is back on, we remove the Fallback view.

In order to push and pop the Fallback view, we are using an instance of navigator via GlobalKey.

Learn More: Navigation When There Is No Context

Now we have created a connection handler. Finally, we need to make sure this gets called during every HTTP requests.

Call Handler During HTTP Request SocketException

Pass the connection handler function to the class that makes HTTP requests. Ideally, you should have designed your application in such a way that all your HTTP requests and made from a single class.

Wrap your connection requests in a try/catch block and if it throws a SocketException, call the handler.

Conclusion

In this post, we looked at how we can handle internet connection state change in a Flutter application. First we looked at a basic example which is best suited for a simple application. Then we detailed a process to manage connection state change which is idea for a large application that makes lots of HTTP requests.

Learn More: Building An Expense Manager App In Flutter

About the author