Checking Internet Connectivity using Cubit : Flutter

In this article, I will show the implementation of connectivity using the cubit. I have already describe what is BLoC and how can we implement checking connectivity using Bloc in previous article . You can view from this link :
Checking Internet Connectivity using Bloc .

What is Cubit BLoC?

Cubit BLoC is a lightweight state management solution for Flutter apps that is built on top of the BLoC architecture. It provides a simple and scalable way to manage the state of your app, allowing you to focus on building your app’s functionality instead of worrying about how to manage state.

Cubit BLoC follows a unidirectional data flow, where the UI sends events to the Cubit, and the Cubit emits states in response to those events. The UI can listen to the states emitted by the Cubit and update itself accordingly.

It doesnot have event like bloc. It only have states so it is easier to implement compared to bloc.

We will be using Connectivity plus to check connection

//In dependencies

dependencies:
  flutter_bloc: ^8.1.2
  connectivity_plus: ^3.0.3

Creating the States class :

In case of states, we have 3 states : Initial state , Internet on state and Internet off state

Every state has initial state

//In internetstate.dart 
abstract class InternetState {}

class InternetInitialState extends InternetState {} //Every state has initial state

class InternetOnState extends InternetState {}

class InternetOffState extends InternetState {}

If every class of state is empty then we can also use enum as it much easier simpler to use rather than creating the classes for all states. we can create enum of state as following way :

enum InternetState {InitialState,OnState,OffState}

Creating Cubit class :

First we create Class InternetCubit that extends Cubit<State>.
state : Internetstate.
Then we create a super Constructor of the class that emit the state.

class InternetBloc extends Cubit<InternetState> {
  InternetBloc() : super(InternetInitialState()) {
   emit(InternetOnState()));
   emit(InternetOffState()));

Then we use Connectivity plus package to check connectivity of Internet

class InternetCubit extends Cubit<InternetStateCubit> {
  Connectivity connectivity = Connectivity();
  StreamSubscription? streamSubscription;
  InternetCubit() : super(InternetInitialStateCubit()) {
    streamSubscription = connectivity.onConnectivityChanged.listen((event) {
      if (event == ConnectivityResult.mobile ||
          event == ConnectivityResult.wifi) {
        emit(InternetStateOnCubit());
      } else {
        emit(InternetStateOffCubit());
      }
    });
  }
  @override
  Future<void> close() {
    streamSubscription?.cancel();
    return super.close();
  }
}

Now we are almost done, just wrap up Material app with BlocProvider as we need to check connectivity to whole app.

Then, Wrap up widget with BlocConsumer<cubit,state> and use Listener method to show to view SnackBar or something else and builder method to show the data depending upon the internet . For example :

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => InternetCubit(),
      child: const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: HomeScreen(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BLoC"),
      ),
      body: SafeArea(
          child: Center(
              child: BlocConsumer<InternetCubit, InternetStateCubit>(
        listener: (context, state) {
          // TODO: implement listener
        },
        builder: (context, state) {
          if (state is InternetStateOnCubit) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [Icon(Icons.wifi), Text("Internet On")],
            );
          } else if (state is InternetStateOffCubit) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.wifi_off_outlined),
                Text("Internet Off")
              ],
            );
          } else {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [Text("Loading...")],
            );
          }
        },
      )
    );
  }
}

Hence, In this way you can implement Cubit in flutter to check the connectivity .

Please Follow 💙 and clap 👏, if you find the article useful. And get notified of my upcoming articles.

Let’s connect :
LinkedIn
Github
Twitter
Instagram
Facebook

You can support me by buying a coffee .