Internet Connection Checker Using Bloc [ Flutter Code Example ]

Here in this article, I will be discussing how you can check the internet connection status using Flutter Bloc and Connectivity Plus Package. You can get both the package on Pub.dev

I will also be discussing how the events and states will work in simple terms based on my understanding.

In this code, I am using the latest version of the Bloc which is version 8.

Feel Free to Ask the Question in the Comments if you don’t understand the code.

Here’s the GitHub repo: Internet Connection Checker

How to check the internet connection continuously in Flutter?

internet connection checker using Flutter Bloc example

connected_event.dart

part of 'connected_bloc.dart';

@immutable
abstract class ConnectedEvent {}

class OnConnectedEvent extends ConnectedEvent{}

class OnNotConnectedEvent extends ConnectedEvent{}

Events are generally triggered by the users. Here the user either turns off the wifi or turns on the wifi. So We have two events mainly. One OnConnectedEvent where users turn on the wifi. Another OnNotConnectedEvent where the user turns off the wifi or mobile internet.

connected_state.dart

part of 'connected_bloc.dart';

@immutable
abstract class ConnectedState {}

class ConnectedInitialState extends ConnectedState {}

class ConnectedSucessState extends ConnectedState {}

class ConnectedFailureState extends ConnectedState {}

States are generally the results of the events. Here I have defined three internet connection states. One state/possibility can be the Initial State ConnectedInitialState where nothing is happening. The second possibility is We are successfully connected to the internet ConnectedSuccessState. The last possibility is we are not connected to the internet ConnectedFailureState. Here connection both includes mobile data and wifi.

connected_bloc.dart

part 'connected_event.dart';
part 'connected_state.dart';

class ConnectedBloc extends Bloc<ConnectedEvent, ConnectedState> {
  StreamSubscription? subscription;

  ConnectedBloc() : super(ConnectedInitialState()) {
    on<OnConnectedEvent>((event, emit) => emit(ConnectedSucessState()));
    on<OnNotConnectedEvent>((event, emit) => emit(ConnectedFailureState()));

    subscription = Connectivity()
        .onConnectivityChanged
        .listen((ConnectivityResult result) {
      if (result == ConnectivityResult.mobile ||
          result == ConnectivityResult.wifi) {
        add(OnConnectedEvent());
      } else {
        add(OnNotConnectedEvent());
      }
    });
  }
  @override
  Future<void> close() {
    subscription?.cancel();
    return super.close();
  }
}

You can define your custom states and events, names really don’t matter. What matters is that you have an understanding of how events are triggered and which events are being triggered and as a result which state appears. For example, We know that once the user turns off the wifi, the event we define earlier OnNotConnectedEvent is triggered and as a result, we get a state where we have no internet connection ConnectedFailureState.

This is what the code represents in the connected_bloc.dart.

 on<OnConnectedEvent>((event, emit) => emit(ConnectedSucessState()));
    on<OnNotConnectedEvent>((event, emit) => emit(ConnectedFailureState()));

This means if the OnConnectedEvent event is triggered, emit (produce) ConnectedSuccessState.

The Next Step is to define when OnConnectedEvent should be triggered/happen. As we know that the event should happen when the user disconnects this mobile or wifi connection. We have to detect that using the Connectivity Plus Package. How do we do that? It is clearly explained in the documentation of that package.

**Connectivity Plus Package Documentation**

  if (result == ConnectivityResult.mobile ||
          result == ConnectivityResult.wifi) {
        add(OnConnectedEvent());
      } else {
        add(OnNotConnectedEvent());
      }

In short, If the result is Wifi Connection or Mobile Data Connection, the OnConnectedEvent event is triggered.

HomePage.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            BlocConsumer<ConnectedBloc, ConnectedState>(
              listener: (context, state) {
                if (state is ConnectedSucessState) {
                  ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Internet Connected')));
                } else if (state is ConnectedFailureState) {
                  ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Internet Lost')));
                }
              },
              builder: (context, state) {
                if (state is ConnectedSucessState) {
                  return const Center(child: Text('Connected'));
                } else if (state is ConnectedFailureState) {
                  return const Center(child: Text('Not Connected'));
                } else {
                  return Container();
                }
              },
            ),

Here we are using Bloc Consumer which provides us with Bloc Listener and Bloc Builder. You can either use one of them. I am using both as an example. Bloc Listener simply listens and doesn’t change make any change in UI. Bloc Builder changes the UI.

If we turn off the wifi, the state changes to ConnectedFailureState.As a result, A Scaffold Messenger will appear (Bloc Listener) and the UI will change and will show to show “Not Connected” text in the Center as defined in the Bloc Builder method above.

Simply,

The user turns off the wifi —–> Stream Listens ——-> OnNotConnectedEvent event triggered ——-> State is ConnectedFailureState ——> Change in Device as defined

Hope you understood how the whole things work in the internet connection check using Flutter Bloc and Connectivity Plus Package. It is also possible to check the internet simply using the Connectivity Plus Package alone. It is easier that way if you just want to show the message/notification of the internet status.

Once again, feel free to comment if you don’t understand anything. Thanks for reading. Have a good day.