{"id":7045,"date":"2021-11-18T11:35:17","date_gmt":"2021-11-18T06:05:17","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7045"},"modified":"2023-01-20T18:54:56","modified_gmt":"2023-01-20T13:24:56","slug":"bloc-pattern","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/","title":{"rendered":"Bloc Pattern"},"content":{"rendered":"<h3><strong>Stream &amp; Stream Builder<\/strong><\/h3>\n<p><strong>What is\u00a0 Stream?<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Stream is a series of things like items or widgets you want to show on the screen. <\/span><span style=\"font-weight: 400;\">Stream is useful when you are dealing with UI.<\/span><\/p>\n<p><strong>Q-What is Stream Builder?<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">A widget that builds everything beneath like every widget beneath rebuild if there are any changes that occur.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone  wp-image-7044\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B1-300x131.png\" alt=\"\" width=\"364\" height=\"159\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B1-300x131.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B1.png 340w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true\">List&lt;String&gt; contacts=[\u201cuser1\u201d,\u201duser2\u201d,\u201duser3\u201d,\u201duser4\u201d,\u201duser5\u201d]\r\n\r\nClass ContactManager{\r\n\r\nStream&lt;List&lt;String&gt;&gt; getContactListNow async*{\r\n\r\nFor(var I=0,I&lt;contacts.length;I++){\r\n\r\nYeield contacts.sublist(0,I+1)\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Yield-Provide the element to stream\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Note-<\/strong>if you want to display 3 element manager is responsible to provide that three-element\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true \">final StreamController&lt;int&gt; _countController=StreamController&lt;int&gt;();\r\n\r\nStream&lt;int&gt; getContactCounter=_counterstream<\/pre>\n<p><img decoding=\"async\" class=\"alignnone  wp-image-7046\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B2-300x144.png\" alt=\"\" width=\"406\" height=\"195\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B2-300x144.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B2.png 324w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Sink:-<\/strong>The\u00a0 process of inputting the data is called a sink.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Stream:-<\/strong> The outputting the data is called Stream.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Subscriber:-<\/strong>The widget that depends on Stream is called subscriber.<\/span><\/p>\n<p><strong>Reason to use Bloc:-<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">It\u2019s structurally organized and easy to use.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Recommended everywhere in small, medium &amp; large projects.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">The code is easily testable so you can iterate with confidence.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">created by google separate presentation logic from business logic.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Created by flexix Angelov to k\u00a0 ow the state of the app.<\/span><\/li>\n<\/ul>\n<p><strong>Advantage:-<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Easily understandable that what happens inside the app<\/span><\/li>\n<li><span style=\"font-weight: 400;\">More Structured code<\/span><\/li>\n<li><span style=\"font-weight: 400;\">know and understand every stage of your app<\/span><\/li>\n<\/ul>\n<p><strong>Cubit:-<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">A Cubit is a special kind of stream component that is based on some function call from UI, a function that rebuilt UI emitting different states of the stream.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\"alignnone  wp-image-7047\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B3-300x75.png\" alt=\"\" width=\"404\" height=\"101\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B3-300x75.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B3.png 448w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A\u00a0 Cubit is a minimal version of the bloc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> Bloc extends Cubit.<\/span><\/p>\n<p><strong>Q. When should I use cubit over bloc in the project?<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">For simple operations, you can use cubit.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> we can use bloc every condition for resource perspective\u00a0 it is good to use cubit when there is a lite operation.<\/span><\/p>\n<p><strong>Q. What is the difference between Cubit and Bloc?<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-7048\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B4-300x75.png\" alt=\"\" width=\"384\" height=\"96\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B4-300x75.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B4.png 448w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Takes action as a function.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-7049\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B5-300x75.png\" alt=\"\" width=\"380\" height=\"95\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B5-300x75.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B5.png 448w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Takes action as an event.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\"><strong>Block Provider<\/strong><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">BlocProvider is the widget that provides a block to all his children, BlocProvider will provide a single instance of the bloc to the subtree below it.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-7050\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B6.png\" alt=\"\" width=\"368\" height=\"354\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B6.png 229w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B6-24x24.png 24w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/p>\n<p><strong>Q. How do blog providers create a single instance?<\/strong><\/p>\n<pre class=\"lang:default decode:true\">BlocProvider(\r\n\r\nCreate:(BuildContext context)=&gt;BlocA()\r\n\r\nChild:ChildA();\r\n\r\n);<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>BuildContext:-<\/strong> The context in which specific widgets are built.<\/span><\/p>\n<p><strong>Q How we can Access it?<\/strong><\/p>\n<pre class=\"lang:default decode:true \">BlocProvider.of&lt;BlocA&gt;(context);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Or\u00a0\r\n\r\nContext.bloc&lt;BlocA&gt;();<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> By default, BlocProvider creates bloc lazily means it will take space in memory when they actually come into use.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">BlocProvider handles the closing part of the bloc automatically.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Q. Is the bloc instance created in the first screen also available in the second screen also?<\/strong><\/span><\/p>\n<p><span style=\"font-weight: 400;\">No, because the context changes the screen to screen so we can not get the same instance on screen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> so for accessing the single instance on the second screen we have to use BlocProvider.value.<\/span><\/p>\n<pre class=\"lang:default decode:true\">BlocProvider.value(\r\n\r\n\/\/here we provide the\u00a0 instance BlocA to new portion of tree\r\n\r\nValue:BlocProvider.of&lt;BlocA&gt;(context),\r\n\r\nChild:Screen2()\r\n\r\n);<\/pre>\n<p><span style=\"font-weight: 400;\">Providing it to the second tree won\u2019t close the only instance of the bloc when the second page gets destroyed, this is because the instance may still be needed in the page above in the ancestor tree.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-7051\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B7-300x75.png\" alt=\"\" width=\"468\" height=\"117\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B7-300x75.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/B7.png 448w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/p>\n<h2><strong>BlocBuilder<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">A widget that helps RE-BUILDING the UI based on bloc state change.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> Rebuilding a large chunk of UI takes a lot of time to compute so for a better experience you have to wrap the exact point of UI, where you want to change.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">BlocBuilder is the widget that requires a bloc or cubit and builder function.\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true\">BlocBuilder&lt;BlocA,BlocAState&gt;(\r\n\r\nBuilder:(context,state){\r\n\r\n}\r\n\r\n)<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>Note:-<\/strong> The builder function must be a pure function.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The function where they return value depends only on the function argument.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">BlocBilder\u00a0 can call multiple times<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\"><strong>Bloc Listener<\/strong><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The widget that used to listen to one widget from another widget, is called once per state.<\/span><\/p>\n<pre class=\"lang:default decode:true\">BlocListener&lt;BlocA,BlocState&gt;(\r\n\r\nListener:(context,state){\r\n\r\n}\r\n\r\nChild:Container()\r\n\r\n)<\/pre>\n<ul>\n<li><span style=\"font-weight: 400;\">Optional listen when function for BlocListener as the optional build when the function was for BlocProvider.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">It can listen to any state change.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\"><strong>Bloc Consumer<\/strong><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A widget that combines both BlocListener and BlocBuilder into a single widget.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stream &amp; Stream Builder What is\u00a0 Stream? Stream is a series of things like items or widgets you want to show on the screen. Stream is useful when you are dealing with UI. Q-What is Stream Builder? A widget that builds everything beneath like every widget beneath rebuild if there are any changes that occur. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[642,651],"tags":[726,722,723,724,308,725],"class_list":["post-7045","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","category-ux-design","tag-bloc","tag-blog","tag-blogging","tag-cubit","tag-stream","tag-stream-builder"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bloc Pattern - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bloc Pattern - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Stream &amp; Stream Builder What is\u00a0 Stream? Stream is a series of things like items or widgets you want to show on the screen. Stream is useful when you are dealing with UI. Q-What is Stream Builder? A widget that builds everything beneath like every widget beneath rebuild if there are any changes that occur. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-18T06:05:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:24:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Bloc Pattern\",\"datePublished\":\"2021-11-18T06:05:17+00:00\",\"dateModified\":\"2023-01-20T13:24:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/\"},\"wordCount\":602,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc-pattern.png\",\"keywords\":[\"bloc\",\"blog\",\"blogging\",\"cubit\",\"stream\",\"stream builder\"],\"articleSection\":[\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/\",\"name\":\"Bloc Pattern - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc-pattern.png\",\"datePublished\":\"2021-11-18T06:05:17+00:00\",\"dateModified\":\"2023-01-20T13:24:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc-pattern.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc-pattern.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bloc-pattern\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bloc Pattern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bloc Pattern - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/bloc-pattern\/","og_locale":"en_US","og_type":"article","og_title":"Bloc Pattern - InnovationM - Blog","og_description":"Stream &amp; Stream Builder What is\u00a0 Stream? Stream is a series of things like items or widgets you want to show on the screen. Stream is useful when you are dealing with UI. Q-What is Stream Builder? A widget that builds everything beneath like every widget beneath rebuild if there are any changes that occur. [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-11-18T06:05:17+00:00","article_modified_time":"2023-01-20T13:24:56+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Bloc Pattern","datePublished":"2021-11-18T06:05:17+00:00","dateModified":"2023-01-20T13:24:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/"},"wordCount":602,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern.png","keywords":["bloc","blog","blogging","cubit","stream","stream builder"],"articleSection":["UI Design","UX Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/","url":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/","name":"Bloc Pattern - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern.png","datePublished":"2021-11-18T06:05:17+00:00","dateModified":"2023-01-20T13:24:56+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/bloc-pattern\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-pattern.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/bloc-pattern\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bloc Pattern"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7045"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7045\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7052"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}