What's the Bloc and What for in flutter?

bloc

In Flutter, a BLoC (Business Logic Component) is a design pattern that separates the presentation layer of an app from its business logic. It allows for easy testing and reusability of code.

A BLoC works by having a stream of data (typically an Observable) that the presentation layer can listen to, and a sink (typically a StreamController) that the presentation layer can use to add new data to the stream. The BLoC itself contains the logic for handling the data and updating the stream.

Here is an example of a simple BLoC that takes in a stream of integers and increments them by one before emitting the updated value:

class CounterBloc {
  // StreamController to handle incoming integers
  final _counterController = StreamController<int>();
  // Sink to add new integers to the stream
  Sink<int> get inCounter => _counterController.sink;
  // Stream of updated integers
  Stream<int> get outCounter => _counterController.stream.map((i) => i + 1);

  CounterBloc() {
    _counterController.stream.listen((data) => print('New counter value: $data'));
  }

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

In this example, the presentation layer can listen to the outCounter stream to receive the updated integers, and use the inCounter sink to add new integers to the stream. The BLoC's dispose method is called when the BLoC is no longer needed to close the stream controller.

A common use case for using BLoC pattern is when you have a complex state that you need to manage, and you want to separate the logic that handles that state from the widgets that display it. This allows you to test the logic separately from the widgets, and also makes it easier to reuse the logic in other parts of the app.

Another benefit of using BLoC is that it promotes a unidirectional data flow, where the data flows in a single direction through the app. This makes it easier to understand and debug the app, as it is clear where the data is coming from and where it is going.

Here’s an example of how a BLoC can be used in a Flutter app:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Create a CounterBloc instance
  final _counterBloc = CounterBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: _counterBloc.outCounter,
        initialData: 0,
        builder: (context, snapshot) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${snapshot.data}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add 1 to the stream
          _counterBloc.inCounter.add(1);
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    _counterBloc.dispose();
    super.dispose();
  }
}

In this example, the MyHomePage widget uses a StreamBuilder to listen to the outCounter stream from the CounterBloc. When the user taps the floating action button, the inCounter sink is used to add 1 to the stream. This causes the StreamBuilder to rebuild and update the displayed value.

In summary, BLoC is a design pattern that can be used in Flutter to separate the presentation layer of an app from its business logic. It allows for easy testing and reusability of code, promotes a unidirectional data flow, and makes it easier to understand and debug the app.