{"id":242,"date":"2022-11-17T10:36:51","date_gmt":"2022-11-17T10:36:51","guid":{"rendered":"http:\/\/thekraftors.com\/blog\/?p=242"},"modified":"2024-07-01T06:52:39","modified_gmt":"2024-07-01T06:52:39","slug":"cubit-in-flutter","status":"publish","type":"post","link":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/","title":{"rendered":"Role of Cubit in Flutter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"242\" class=\"elementor elementor-242\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-471ad2bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"471ad2bf\" 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-ea4097a\" data-id=\"ea4097a\" 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-e53a57f elementor-widget elementor-widget-text-editor\" data-id=\"e53a57f\" 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<!-- wp:heading -->\n<h2><strong>What is Cubit?<\/strong><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph -->\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<!-- \/wp:paragraph --><!-- wp:heading -->\n<h2><strong>What is Cubit state?<\/strong><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph -->\n<p>Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states.\u00a0<strong>Every cubit requires an initial state which will be the state of the cubit before emit has been called<\/strong>.<\/p>\n<!-- \/wp:paragraph --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">In our app we will create cubit and state. There are two classes I created for them<\/pre>\n<!-- \/wp:preformatted --><!-- wp:paragraph -->\n<p>App Cubits that extends cubit<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>The first step is to add dependencies to\u00a0<strong>pubspec.yaml<\/strong>. Both Cubit and Bloc are interoperable, in fact, the\u00a0<code>Bloc<\/code>\u00a0class extends\u00a0<code>Cubit<\/code>. This means we need to import only the\u00a0<strong>bloc\u00a0<\/strong>and\u00a0<strong>flutter_bloc<\/strong>\u00a0libraries and we&#8217;re going to get Cubit bundled for free.<\/p>\n<!-- \/wp:paragraph --><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e4e7ef\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-background\" style=\"background-color: #e4e7ef;\"><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\"><strong>dependencies:<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0<strong> flutter:<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0\u00a0<strong>\u00a0 sdk: flutter<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0<strong> bloc: ^6.0.1<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0<strong> flutter_bloc: ^6.0.1<\/strong><\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><!-- wp:paragraph -->\n<p>Next, we need to create the files that&#8217;ll hold our\u00a0<code>WeatherCubit<\/code>\u00a0and also\u00a0<code>WeatherState<\/code>\u00a0classes. It&#8217;s possible to create all these files and boilerplate manually but there are also handy extensions for\u00a0<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=FelixAngelov.bloc\" target=\"_blank\" rel=\"noreferrer noopener\">VS Code<\/a>\u00a0and\u00a0<a href=\"https:\/\/plugins.jetbrains.com\/plugin\/12129-bloc\" target=\"_blank\" rel=\"noreferrer noopener\">IntelliJ\/Android Studio<\/a>. We&#8217;ll use VS Code in this tutorial.<\/p>\n<!-- \/wp:paragraph --><!-- wp:heading -->\n<h2><strong>Weather State<\/strong><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph -->\n<p>A rule of thumb is to always build out the state class(es) first. They&#8217;re the reason why you want to create a Cubit in the first place, right? Without a proper representation of the state of the Cubit, you can&#8217;t possibly write logic that will emit new states. So, what kind of\u00a0<code>WeatherState<\/code>\u00a0do we want to have?<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>Well, we&#8217;re going to be asynchronously loading a single resource &#8211; the\u00a0<code>Weather<\/code>\u00a0model. In such occasions, it&#8217;s best to represent the state as multiple subclasses of the\u00a0<code>WeatherState<\/code>\u00a0abstract class. If we take a look at the\u00a0<strong>weather_state.dart<\/strong>\u00a0file generated by the extension, we can see that one such subclass has already been created for us:<\/p>\n<!-- \/wp:paragraph --><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e0e1e4\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-background\" style=\"background-color: #e0e1e4;\"><!-- wp:paragraph -->\n<p>\u00a0<strong> part of &#8216;weather_cubit.dart&#8217;;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>abstract class WeatherState {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>const WeatherState();<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>}<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>class WeatherInitial extends WeatherState {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0<strong> const WeatherInitial();<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\"><strong>}<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0 <strong>Example:\u00a0 class AppCubits extends Cubit&lt;CubitState&gt;{<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>AppCubits() : super(InitialState())<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>{<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>emit(WelcomState());<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong> }<\/strong><\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>}<\/strong><\/pre>\n<!-- \/wp:preformatted --><\/div>\n<!-- \/wp:group --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">CubitStates that extends equitable<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">This\u00a0<code>WeatherInitial<\/code>\u00a0state will indicate that no action has yet been taken by the user and that we should display an initial UI. So, what other state subclasses should there be for asynchronously loading the weather? Well, we need to be able to\u00a0<strong>show a progress<\/strong>\u00a0indicator while we&#8217;re awaiting the data and then\u00a0<strong>handle success<\/strong>\u00a0or a possible\u00a0<strong>error<\/strong>.<\/p>\n<!-- \/wp:paragraph --><!-- wp:group {\"style\":{\"color\":{\"background\":\"#e1e3e5\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group has-background\" style=\"background-color: #e1e3e5;\"><!-- wp:paragraph -->\n<p><strong>class WeatherLoading extends WeatherState {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0<strong> const WeatherLoading();<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>}<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>class WeatherLoaded extends WeatherState {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>final Weather weather;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>\u00a0 const WeatherLoaded(this.weather);<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0<strong> @override<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>bool operator ==(Object o) {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0<strong> if (identical(this, o)) return true;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0<strong> return o is WeatherLoaded &amp;&amp; o.weather == weather;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0<strong> }<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>@override<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>int get hashCode =&gt; weather.hashCode;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>}<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>class WeatherError extends WeatherState {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>final String message;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>const WeatherError(this.message);<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>@override<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>bool operator ==(Object o) {<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0<strong> if (identical(this, o)) return true;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0 <strong>return o is WeatherError &amp;&amp; o.message == message;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>\u00a0 }<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>@override<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0 <strong>int get hashCode =&gt; message.hashCode;<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>}<\/strong><\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0Example: abstract class CubitState extends Equatable{}<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 class InitialState extends CubitState{<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 @override<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0List&lt;Object&gt; get props =&gt;[];<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"textColor\":\"black\"} -->\n<p class=\"has-black-color has-text-color\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0}<\/p>\n<!-- \/wp:paragraph --><!-- wp:heading -->\n<h2><strong>Create State-<\/strong><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph -->\n<p>Creating states are easy. In general first you need to create an abstract class, this abstract class should extend Equatable. Equatable is package that helps you know if two states are same or not.\u00a0\u00a0<\/p>\n<!-- \/wp:paragraph --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0<\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\u00a0Example: abstract class CubitState extends Equatable{}<\/pre>\n<!-- \/wp:preformatted --><!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">Create Cubits:<\/pre>\n<!-- \/wp:preformatted --><!-- wp:paragraph -->\n<p>We need to build a class that extends Cubit. Cubit itself takes state. The current state of a Cubit can be accessed via the state keyword. You need to initialize a state using super() during\u00a0 cubit initialization.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>Example: class AppCubits extends Cubit&lt;CubitStates&gt;{<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 AppCubits():super(InitialState());\u00a0\u00a0\u00a0<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n<!-- \/wp:paragraph --><!-- wp:heading {\"level\":1} -->\n<h1>Conclusion<\/h1>\n<!-- \/wp:heading --><!-- wp:paragraph -->\n<p>Cubit is a combination of the\u00a0<a href=\"https:\/\/pub.dev\/packages\/bloc\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>bloc<\/strong><\/a>\u00a0and\u00a0<a href=\"https:\/\/pub.dev\/packages\/provider\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>provider<\/strong><\/a>\u00a0packages where you get riddance from events and rely on methods while you get ease in managing it as it helps to implement it with ease without any boilerplate code so till now it is one of the best combinations of the two state management techniques.<\/p>\n<p>\u00a0<\/p>\n<h6>Also, Explore<\/h6>\n<p>\u00a0<\/p>\n<h3>How to Upgrade Flutter Version?\u00a0<\/h3>\n<p>\u00a0<\/p>\n<p>To update the Flutter version use the flutter upgrade command:<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>$ flutter upgrade<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>To check\u00a0 Flutter version use the command:<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>$ flutter &#8211;version<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>To Downgrade the Flutter version use the following Steps(from file):<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>1. Download old(Required) Flutter version.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>2. Extract file and&#8230;&#8230;&#8230;&#8230;&#8230;.<\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-weight: 400;\">Read the full article here: <\/span><\/p>\n<p><a href=\"https:\/\/thekraftors.com\/blog\/how-to-upgrade-and-downgrade-flutter-version\/\"><span style=\"font-weight: 400;\">https:\/\/thekraftors.com\/blog\/how-to-upgrade-and-downgrade-flutter-version\/<\/span><\/a><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<!-- \/wp:paragraph --><!-- wp:image {\"align\":\"left\",\"id\":243,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image alignleft size-large\"><img decoding=\"async\" width=\"1024\" height=\"21\" class=\"wp-image-243\" src=\"http:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-6-1024x21.png\" alt=\"\" srcset=\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-6-1024x21.png 1024w, https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-6-300x6.png 300w, https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-6-768x16.png 768w, https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/image-6.png 1118w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<!-- \/wp:image -->\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 Cubit? 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&hellip;<\/p>\n","protected":false},"author":6,"featured_media":624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-242","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>Role of Cubit in Flutter - The Kraftors Flutter cubit<\/title>\n<meta name=\"description\" content=\"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you\" \/>\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\/cubit-in-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Role of Cubit in Flutter - The Kraftors Flutter cubit\" \/>\n<meta property=\"og:description\" content=\"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thekraftors.com\/blog\/cubit-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-17T10:36:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-01T06:52:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/\",\"url\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/\",\"name\":\"Role of Cubit in Flutter - The Kraftors Flutter cubit\",\"isPartOf\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png\",\"datePublished\":\"2022-11-17T10:36:51+00:00\",\"dateModified\":\"2024-07-01T06:52:39+00:00\",\"author\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921\"},\"description\":\"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you\",\"breadcrumb\":{\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage\",\"url\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png\",\"contentUrl\":\"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png\",\"width\":1280,\"height\":720,\"caption\":\"Cubit Flutter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/thekraftors.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Role of Cubit 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":"Role of Cubit in Flutter - The Kraftors Flutter cubit","description":"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you","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\/cubit-in-flutter\/","og_locale":"en_US","og_type":"article","og_title":"Role of Cubit in Flutter - The Kraftors Flutter cubit","og_description":"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you","og_url":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/","og_site_name":"The Kraftors","article_publisher":"https:\/\/www.facebook.com\/thekraftors\/","article_published_time":"2022-11-17T10:36:51+00:00","article_modified_time":"2024-07-01T06:52:39+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/","url":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/","name":"Role of Cubit in Flutter - The Kraftors Flutter cubit","isPartOf":{"@id":"https:\/\/thekraftors.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage"},"image":{"@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png","datePublished":"2022-11-17T10:36:51+00:00","dateModified":"2024-07-01T06:52:39+00:00","author":{"@id":"https:\/\/thekraftors.com\/blog\/#\/schema\/person\/a39df6d7b32ca60b09a2bee37695a921"},"description":"Role of Cubit in Flutter: Cubit is a basic and unsurprising state administration arrangement from the bloc library, making a difference you","breadcrumb":{"@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#primaryimage","url":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png","contentUrl":"https:\/\/thekraftors.com\/blog\/wp-content\/uploads\/2022\/11\/Cubit-in-Flutter.png","width":1280,"height":720,"caption":"Cubit Flutter"},{"@type":"BreadcrumbList","@id":"https:\/\/thekraftors.com\/blog\/cubit-in-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thekraftors.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Role of Cubit 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\/242","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=242"}],"version-history":[{"count":12,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":507,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/posts\/242\/revisions\/507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/media\/624"}],"wp:attachment":[{"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thekraftors.com\/blog\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}