What is BLoC in flutter? how to use BLoC in our flutter projects? - (Business Logic Component)

BLoC (Business Logic Component) is a design pattern in Flutter that provides a way to manage and separate the business logic of an app from its presentation layer. 

bloc-pattern-flutter


The BLoC pattern uses streams to emit data events to the presentation layer and to receive user events from the presentation layer. A BLoC consists of two main parts: 

  1. The BLoC itself, which implements the business logic and manages the streams
  2. The presentation layer displays the data and sends user events to the BLoC

The presentation layer communicates with the BLoC through streams, which provide a unidirectional data flow and allow for loose coupling between the BLoC and the presentation layer.

It's a design pattern used in Flutter to manage state and handle the flow of data in an app. It separates UI, business logic, and data sources into separate classes to make the code easier to maintain and test.

In Flutter, the Bloc (Business Logic Component) pattern uses streams to communicate data between the presentation layer (UI) and the business logic layer.

BLoC_pattern


  • Stream: A stream is a sequence of asynchronous events. In the Bloc pattern, stream is used to pass data from the Bloc to the UI, allowing the UI to update in response to changes in the data.
  • Sink: A sink is a destination for a stream, where data can be added to the stream. In the Bloc pattern, a sink is used to send events from the UI to the Bloc, updating the state of the application.
  • StreamController: A StreamController is a Flutter class that manages the flow of data through streams. It is the source of the stream, and it has a sink that allows data to be added to the stream.
  • StreamTransformer: A StreamTransformer is a Flutter class that transforms the data that is added to the stream before it reaches the sink. It is used to apply transformations to the stream data before it is sent to the UI.

Providing an example of how to implement a simple BLoC in Flutter:

class CounterBloc {
  final _counter = BehaviorSubject<int>(seedValue: 0);

  Stream<int> get counter => _counter.stream;

  void increment() {
    _counter.add(_counter.value + 1);
  }

  void dispose() {
    _counter.close();
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      body: StreamBuilder(
        stream: counterBloc.counter,
        initialData: 0,
        builder: (context, snapshot) {
          return Center(
            child: Text(
              '${snapshot.data}',
              style: TextStyle(fontSize: 24),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterBloc.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

In this example:

  • The CounterBloc class manages the state of a counter. It has a private variable _count and a public Stream count. 
  • The increment method increments the count and adds a new value to the stream
  • The dispose method is used to close the stream when the Bloc is no longer needed.

class CounterBloc {
  int _count = 0;

  final _countController = StreamController<int>();
  Stream<int> get count => _countController.stream;

  void increment() {
    _countController.sink.add(++_count);
  }

  void dispose() {
    _countController.close();
  }
}

The UI can then listen to the count stream and update whenever a new value is emitted.

Comments

Popular posts from this blog

Error Handling in Flutter - Gradle issue

How to Make a Dynamic and Trending ListView with Flutter Widgets?

Understanding API integration with Getx State management