Information on Flutter Bloc pattern to reuse the state and event classes

Question

I am using flutter_bloc package for state management and extends with Equatable. I have made Event class and state class for the data to display which I receive from api. It is the simple app where I am receiving data from api and just to display on the screen on UI. Everything works good. But now I also want to check the internet connectivity and display the snackBar if internet is not working. For this I will use Connectivity_plus package of flutter. But as I am using the Bloc pattern I already have one state class and one event class.

My question is, if now I would like to have the feature if Internet is working or not and if I want to implement in Bloc pattern then I have to create new NetworkState class and NetworkEvent class? OR I can reuse the state and event class which I already have in my app ??

In the general terms every time we have to make new states class and event class for the new feature or we can reuse these class for every feature which we implement in Bloc pattern in flutter?

score 2 · Accepted Answer · answered May 04 '23 at 15:19

The best practice is you should make separate state and event classes for each feature in your app. This can help keep the code organized and makes it easier to maintain and expand your application in the future. for example, in your situation, you can create a new NetworkEvent class that will fire when the application detects a change in network connectivity and a new NetworkState class that will contain the current network connection state. This way, you can keep your existing state and event classes focused on your application's existing functionality, and add new capabilities to networking functionality.

Thanks for the answer and clearing the subject. – Harry May 04 '23 at 15:44 — Harry, May 04 '23 at 15:44

score 2 · Answer 2 · answered May 04 '23 at 15:24

2

As Dewa suggested, you should probably create a new bloc (along with new events and states) for the connectivity feature.

Bloc's design tends to encourage keeping a bloc/cubit simple and have only one responsibility.

answered May 04 '23 at 15:24

Apealed

1,415
8
29

score 2 · Answer 3 · answered May 04 '23 at 16:23

I agree with the other answers, just one thing to note. connectivity_plus doesn't verify whether the device has connectivity or not, just whether its on wifi or mobile data etc...To confirm the ability to connect online, internet_connection_checker is the better tool.

You can manually check, or subscribe to its stream of InternetConnectionStatus and always be up to date. Just call the NetworkInitConnectionListener on app start and you're good to go.

emit.forEach is an easy way to subscribe to a stream in Bloc and return a new state on each new stream update. If you don't need/want an updated state, just return state;

import 'package:internet_connection_checker/internet_connection_checker.dart';

class NetworkBloc extends Bloc<NetworkEvent, InternetConnectionStatus> {
  NetworkBloc() : super(InternetConnectionStatus.connected) {
    on<NetworkInitConnectionListener>(_onNetworkInitConnectionListener);
  }

  Future<void> _onNetworkInitConnectionListener(
    NetworkInitConnectionListener event,
    Emitter<InternetConnectionStatus> emit,
  ) async {
    final connectionStream = InternetConnectionChecker().onStatusChange;

    // Will emit a new state whenever the stream is updated
    emit.forEach(
      connectionStream,
      onData: (InternetConnectionStatus status) => status,
    );
  }
}

Information on Flutter Bloc pattern to reuse the state and event classes

3 Answers3