{"id":227,"date":"2022-11-15T13:12:53","date_gmt":"2022-11-15T13:12:53","guid":{"rendered":"http:\/\/thekraftors.com\/blog\/?p=227"},"modified":"2024-07-01T06:31:39","modified_gmt":"2024-07-01T06:31:39","slug":"bloc-pattern-in-flutter","status":"publish","type":"post","link":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/","title":{"rendered":"BLoC in Flutter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"227\" class=\"elementor elementor-227\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5fa6ca66 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5fa6ca66\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1e76beed\" data-id=\"1e76beed\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3488f8ec elementor-widget elementor-widget-text-editor\" data-id=\"3488f8ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><!-- wp:heading --><\/p>\n<h2>What is BLoC?<\/h2>\n<p>\u00a0<\/p>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>BLoC stands for\u00a0<strong>Business Logic Components<\/strong><span style=\"background-color: rgba(0, 32, 80, 0.2); font-size: revert;\"> because, it aims to separate the application\u2019s business logic from User Interface and making the application code more unambiguous, scalable, and testable.<\/span><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>It is\u00a0 one of the state management for Flutter applications that allows you to separate the\u00a0 logic from the UI and writing code in Bloc makes it easier to write and reuse tests.<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>Example: class DemoBloc extends Bloc&lt;DemoEvent, DemoState&gt; {<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0GraphBloc(this._graphRepositoty) : super(GraphLoadingState()) {}}<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The DemoBloc class is a bridge between our UI and the Data class because, this class will handle all the Events triggered by the User and sends the relevant State back to the UI.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":230,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} --><\/p>\n<figure><img decoding=\"async\" src=\"http:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-4.png\" alt=\"\" \/><\/figure>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>To understand it more, let\u2019s say we want to fetch data from some kind of service, then the UI will trigger the event <code>TodoFetched<\/code>\u00a0to the Bloc.<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><strong>The Bloc will initially have a state called\u00a0<code>TodoInitial<\/code>\u00a0and then when we fetch the data from the repository, we can update the state to\u00a0<code>TodoLoaded<\/code>.<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>Also, when we update the state, also update the UI.\u00a0We will see this in the example later on.\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>Adding Bloc to Flutter<\/h2>\n<p>\u00a0<\/p>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p><strong>First, you need to add the following dependency to the\u00a0<code>pubspec.yaml<\/code>\u00a0file:<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e3e7ea\"}},\"layout\":{\"type\":\"constrained\"}} --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>dependencies:<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0<strong> bloc: ^8.0.2<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>cupertino_icons: ^1.0.2<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0<strong> equatable: ^2.0.3<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0<strong> flutter:<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 <strong>sdk: flutter<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>flutter_bloc: ^8.0.1<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>http: ^0.13.4<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>dev_dependencies:<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>flutter_lints: ^1.0.0<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>flutter_test:<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- \/wp:group --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>Click\u00a0<kbd>CTRL<\/kbd>\u00a0+\u00a0<kbd>S<\/kbd>\u00a0to save, and you have successfully added the above dependencies to your Flutter application!<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>The\u00a0<code>bloc<\/code>\u00a0dependency is used because we also used\u00a0<code>cubit<\/code>\u00a0in the example.<\/li>\n<li>The\u00a0<code>flutter_bloc<\/code>\u00a0will provide you with the widgets necessary to make it easier to use the Bloc pattern in Flutter.<\/li>\n<li>The\u00a0<a href=\"https:\/\/pub.dev\/packages\/equatable\"><code>equatable<\/code><\/a>\u00a0package is used to easily compare objects in Dart.<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>Observing Bloc Changes<\/h2>\n<p>\u00a0<\/p>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:heading {\"level\":6} --><\/p>\n<h6><strong>In the following application, we would fetch data from the following url:<\/strong><\/h6>\n<p>\u00a0<\/p>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p><strong>First, in the\u00a0<code>main.dart<\/code>\u00a0file delete all the code and add the following:<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>When comparing objects, you would have to override both the\u00a0<code>==<\/code>\u00a0and the\u00a0<code>hashcode<\/code>\u00a0method, so with\u00a0<code>equatable<\/code>\u00a0you wouldn\u2019t have to worry about that since it\u2019s easily done with just one line of code.<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>The\u00a0<code>http<\/code>\u00a0dependency is used to create http request to fetch, delete, update, create.<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e6eaee\"}},\"layout\":{\"type\":\"constrained\"}} --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>import &#8216;package:bloc\/bloc.dart&#8217;;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>import &#8216;package:flutter\/material.dart&#8217;;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>import &#8216;app.dart&#8217;;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>import &#8216;todo_bloc_observer.dart&#8217;;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>void main() async {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>BlocOverrides.runZoned(<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 <strong>() =&gt; runApp(const App()),<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 <strong>blocObserver: TodoBlocObserver(),<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>\u00a0<\/strong> <strong>);<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- \/wp:group --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li>The\u00a0<code>BlocOverrides<\/code>\u00a0class contains the property\u00a0<code>blocObserver<\/code>\u00a0which will enable us to observe any change in the Bloc and this would make it easier when getting stuck on some issue. Now create a file called\u00a0<code>todo_bloc_observer.dart<\/code>\u00a0and add the following:<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li><strong>To understand how bloc works, we need to know what are events and states.<\/strong><\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>1. Event<\/strong><strong>:<\/strong> events are an application\u2019s inputs (like button press to load images, submit etc.).<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre>\u00a0\u00a0\u00a0\u00a0\u00a0 Example: <\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:group {\"style\":{\"color\":{\"background\":\"#dcdee1\"}},\"layout\":{\"type\":\"constrained\"}} --><br \/><!-- wp:paragraph {\"backgroundColor\":\"white\"} --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>abstract class DemoEvent {}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph {\"backgroundColor\":\"white\"} --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>class Demo extends DemoEvent {}<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- \/wp:group --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>2. <strong>State<\/strong>: States are simply the application\u2019s state, which can be changed in response to the event received. The UI will update according to the State it receives from the Bloc.<\/p>\n<p>\u00a0<\/p>\n<p>For example,<strong> there could be different kinds of states &#8211;<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>LoadingState<\/strong> &#8211; Will Show Progress Indicator<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>LoadedState<\/strong> &#8211; Will Show Actual widget with data<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p><strong>ErrorState<\/strong> &#8211; Will show an error that something went wrong.<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e3e7ea\"}},\"layout\":{\"type\":\"constrained\"}} --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0 <strong>Example: abstract class WeatherState {}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>class DemoInitial extends DemoState {}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>class DemoLoadInprogress extends DemoState {}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>class DemoLoadSuccess extends DemoState {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>final Demo Demo;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>WeatherLoadSuccess({required this.Demo});<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>class DemoLoadFailure extends DemoState {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>final String error;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>DemoLoadFailure({required this.error});<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong> }<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- \/wp:group --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p><strong>Bloc manages these events and states, i.e., it takes a stream of Events and transforms them into a stream of States as output.<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<h6><strong>How Does its&#8217;s Work?<\/strong><\/h6>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre><strong>When you use flutter bloc you are going to create events to trigger the interactions with the app and then the bloc in charge is going to emit the requested data with a state.<\/strong><\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<h6>Bloc Widget:<\/h6>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<ul>\n<li><strong>BlocProvider<\/strong><strong>:<\/strong> It is used as dependency widget so that a single instance of a bloc can be provided to multiple widgets within a subtree. It is put it at the place from where all the children can access the bloc.<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:group {\"style\":{\"color\":{\"background\":\"#eeeeee\"}},\"layout\":{\"type\":\"constrained\"}} --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>class MyApp extends StatelessWidget {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>@override<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>Widget build(BuildContext context) {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0<strong> return BlocProvider(<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 <strong>create: (context) =&gt; \/\/Bloc Class name,<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 <strong>child: MaterialApp(<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0<strong>home: \/\/Home page ,<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0 \u00a0<strong>),<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 \u00a0<strong>);<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong>}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p><strong> }<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<ul>\n<li><strong>BlocBuilder<\/strong>: It is a widget that helps Re-building the UI based on State changes. It takes two things bloc, and state.<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong>body: BlocBuilder&lt;event,State&gt;(<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0<strong>builder: (context, state) {<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0<strong>return &#8230;<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0\u00a0 \u00a0<strong>}<\/strong><\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- wp:paragraph --><\/p>\n<p>\u00a0 <strong>)<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><br \/><!-- \/wp:group --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>Conclusion<\/h2>\n<p>\u00a0<\/p>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>\u00a0<\/p>\n<p>We can conclude that the Flutter app proves itself as a useful application developer. It assists a lot in the field of programming and technology. Flutter app works better than the application of iOS and Android, t<span style=\"font-size: revert; background-color: #e1bee7;\">he programmers, as well as non-programmers, can make\u00a0such apps.<\/span><span style=\"font-size: revert;\">\u00a0<\/span><\/p>\n<p>\u00a0<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph {\"align\":\"left\"} --><\/p>\n<p>Dart provides the lowest run rate and all the developing processes precede in a stable condition. Moreover, it can manipulate all the applications that need advancements for a more immeasurable version. We hope this article or an unbiased review of the Flutter app will be helpful for you.<\/p>\n<p>\u00a0<\/p>\n<h6>Also, Explore<\/h6>\n<p>\u00a0<\/p>\n<h4>Cubit in Flutter<\/h4>\n<p>\u00a0<\/p>\n<p>Cubit is a state management. It is a subset of the bloc package that does not given credit to events and instead uses methods to emit new states. It\u2019s a class that stores an observable state, the observation is powered by Streams but in such a friendly way that it is not necessary to know reactive programming.<\/p>\n<p>Read the full article here:\u00a0<a href=\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/\" target=\"_blank\" rel=\"external noreferrer noopener\">https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/(opens in a new tab)<\/a><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"align\":\"left\",\"id\":231,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} --><\/p>\n<figure><img decoding=\"async\" src=\"http:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-5-1024x21.png\" alt=\"\" \/>,<\/figure>\n<p><!-- \/wp:image --><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What is BLoC? \u00a0 BLoC stands for\u00a0Business Logic Components because, it aims to separate the application\u2019s business logic from User Interface and making the application code more unambiguous, scalable, and&hellip;<\/p>\n","protected":false},"author":6,"featured_media":595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>BLoC in Flutter - The Kraftors Flutter<\/title>\n<meta name=\"description\" content=\"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BLoC in Flutter - The Kraftors Flutter\" \/>\n<meta property=\"og:description\" content=\"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"The Kraftors\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/thekraftors\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-15T13:12:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-01T06:31:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aishwarya Rawani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@the_kraftors\" \/>\n<meta name=\"twitter:site\" content=\"@the_kraftors\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aishwarya Rawani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/\",\"url\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/\",\"name\":\"BLoC in Flutter - The Kraftors Flutter\",\"isPartOf\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png\",\"datePublished\":\"2022-11-15T13:12:53+00:00\",\"dateModified\":\"2024-07-01T06:31:39+00:00\",\"author\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921\"},\"description\":\"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.\",\"breadcrumb\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage\",\"url\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png\",\"contentUrl\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png\",\"width\":1280,\"height\":720,\"caption\":\"Bloc Flutter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/thekraftors.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BLoC in Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/thekraftors.com\/blog\/#website\",\"url\":\"https:\/\/thekraftors.com\/blog\/\",\"name\":\"The Kraftors\",\"description\":\"AI | AR | eCommerce | Devops | Magento | Flutter\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/thekraftors.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921\",\"name\":\"Aishwarya Rawani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8aff565eaa1e1ed452ea8f291542bfcb671ee92ad38709158cce1152bd2f00c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b8aff565eaa1e1ed452ea8f291542bfcb671ee92ad38709158cce1152bd2f00c?s=96&d=mm&r=g\",\"caption\":\"Aishwarya Rawani\"},\"url\":\"https:\/\/thekraftors.com\/blog\/author\/aishwarya-rawani\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BLoC in Flutter - The Kraftors Flutter","description":"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/","og_locale":"en_US","og_type":"article","og_title":"BLoC in Flutter - The Kraftors Flutter","og_description":"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.","og_url":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/","og_site_name":"The Kraftors","article_publisher":"https:\/\/www.facebook.com\/thekraftors\/","article_published_time":"2022-11-15T13:12:53+00:00","article_modified_time":"2024-07-01T06:31:39+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png","type":"image\/png"}],"author":"Aishwarya Rawani","twitter_card":"summary_large_image","twitter_creator":"@the_kraftors","twitter_site":"@the_kraftors","twitter_misc":{"Written by":"Aishwarya Rawani","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/","url":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/","name":"BLoC in Flutter - The Kraftors Flutter","isPartOf":{"@id":"https:\/\/thekraftors.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage"},"image":{"@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png","datePublished":"2022-11-15T13:12:53+00:00","dateModified":"2024-07-01T06:31:39+00:00","author":{"@id":"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921"},"description":"A strategy for managing state and business logic in flutter apps is called the BLoC (Business Logic Component) pattern.","breadcrumb":{"@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#primaryimage","url":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png","contentUrl":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Blog-Page.png","width":1280,"height":720,"caption":"Bloc Flutter"},{"@type":"BreadcrumbList","@id":"https:\/\/thekraftors.com\/blog\/bloc-pattern-in-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thekraftors.com\/blog\/"},{"@type":"ListItem","position":2,"name":"BLoC in Flutter"}]},{"@type":"WebSite","@id":"https:\/\/thekraftors.com\/blog\/#website","url":"https:\/\/thekraftors.com\/blog\/","name":"The Kraftors","description":"AI | AR | eCommerce | Devops | Magento | Flutter","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thekraftors.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921","name":"Aishwarya Rawani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b8aff565eaa1e1ed452ea8f291542bfcb671ee92ad38709158cce1152bd2f00c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8aff565eaa1e1ed452ea8f291542bfcb671ee92ad38709158cce1152bd2f00c?s=96&d=mm&r=g","caption":"Aishwarya Rawani"},"url":"https:\/\/thekraftors.com\/blog\/author\/aishwarya-rawani\/"}]}},"_links":{"self":[{"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":87,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/media\/595"}],"wp:attachment":[{"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}