what is bloc in a flutter

BLoC (Business Logic Component) is a design pattern that separates business logic from the user interface in a Flutter application. It helps to structure your code in a way that is easy to test and maintain, and it allows you to reuse business logic across multiple screens or widgets.

In a BLoC architecture, the user interface (UI) communicates with the business logic through a stream of events. The business logic processes these events and updates the state of the app, which is then reflected in the UI. This separation of concerns allows you to focus on the core functionality of the app without being concerned with the details of the UI.

To implement a BLoC in Flutter, you typically create a BLoC class that extends the Bloc class from the flutter_bloc library. This class contains the business logic and manages the stream of events and the state of the app. You can then use a BlocProvider widget to make the BLoC available to the rest of the app, and you can use a BlocBuilder widget to build the UI based on the state of the BLoC.

Overall, the BLoC pattern is a useful way to structure your Flutter app and manage the flow of data between the business logic and the UI. It can help you build scalable, maintainable, and testable apps.

Here is an example of a simple BLoC in Flutter:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, count) {
            return Text(
              '$count',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: () {
                counterBloc.add(CounterEvent.increment);
              },
              child: Icon(Icons.add),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: () {
                counterBloc.add(CounterEvent.decrement);
              },
              child: Icon(Icons.remove),
            ),
          ),
        ],
      ),
    );
  }
}

enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      case CounterEvent.decrement:
        yield state - 1;
        break;
    }
  }
}