{"id":5009,"date":"2021-11-18T10:10:33","date_gmt":"2021-11-18T09:10:33","guid":{"rendered":"https:\/\/duskosavic.com\/blog\/?p=5009"},"modified":"2021-11-18T10:10:33","modified_gmt":"2021-11-18T09:10:33","slug":"how-to-structure-flutter-app-when-using-bloc-pattern","status":"publish","type":"post","link":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/","title":{"rendered":"How To Structure Flutter App When Using BLoC Pattern"},"content":{"rendered":"<div class=\"seriesmeta\">This entry is part 1 of 2 in the series <a href=\"https:\/\/duskosavic.com\/blog\/series\/developing-flutter-apps-with-bloc-pattern\/\" class=\"series-705\" title=\"Developing Flutter Apps with BLoC Pattern\">Developing Flutter Apps with BLoC Pattern<\/a><\/div>\r\n<p>When using BLoC as the state management technique for your Flutter app, your best bet is to open a folder called <span style=\"font-family: courier new, courier, monospace;\">packages<\/span> and put all of the code for all of your BLoCs into it.<\/p>\r\n<h2>BLoC in Packages Folder<\/h2>\r\n<p>I&#8217;ve got this idea from <a href=\"https:\/\/github.com\/felangel\/bloc\">Felix Angelov<\/a> and it serves me well. Previously, I had bloc code in folder <span style=\"font-family: courier new, courier, monospace;\">blocs<\/span>, screens using it in <span style=\"font-family: courier new, courier, monospace;\">ui\/screens<\/span>, repository for data in<span style=\"font-family: courier new, courier, monospace;\"> \/repositories<\/span>, models in <span style=\"font-family: courier new, courier, monospace;\">\/models<\/span> and so on. The idea of blocs in packages folder is the opposite: act as if you were really creating a standalone package for someone else to use, like you were going to publish it on <a href=\"https:\/\/pub.dev\/packages\/bloc\">pub.dev.<\/a> <br \/><br \/><\/p>\r\n<div id=\"attachment_5039\" style=\"width: 629px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5039\" class=\" wp-image-5039\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png\" alt=\"Bloc architecture in Flutter apps\" width=\"619\" height=\"421\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-768x523.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture.png 999w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><\/a><p id=\"caption-attachment-5039\" class=\"wp-caption-text\">Bloc architecture in Flutter apps<\/p><\/div>\r\n<p>The image above shows a mix of blocs in their own folder <span style=\"font-family: courier new, courier, monospace;\">\/blocs<\/span> and the blocs that are in the <span style=\"font-family: courier new, courier, monospace;\">\/packages<\/span> folder. The former are the legacy code and they are being transferred to the <span style=\"font-family: courier new, courier, monospace;\">\/packages<\/span> architecture.<\/p>\r\n<h2>Basic BLoC Structure with Models<\/h2>\r\n<p>The basic blog will be the same regardless of the encompassing folder. In the image below, we see a <strong>Login<\/strong> bloc with models for <strong>email<\/strong> and <strong>password<\/strong>.<\/p>\r\n<div id=\"attachment_5040\" style=\"width: 606px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5040\" class=\" wp-image-5040\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-300x215.png\" alt=\"Single bloc in Flutter app\" width=\"596\" height=\"427\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-300x215.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-1024x734.png 1024w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc-768x550.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc.png 1080w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><p id=\"caption-attachment-5040\" class=\"wp-caption-text\">Single Login bloc in Flutter app<\/p><\/div>\r\n<p>There is not much code for this bloc at this place as the rest of it is dispersed throughout the entire app. This becomes error prone and tiresome after you have a few dozen of these to handle.<\/p>\r\n<h2>Structure of Specific BLoC Files in a Package<\/h2>\r\n<p>Now let us see what does a bloc within a package look like:<\/p>\r\n<div id=\"attachment_5047\" style=\"width: 561px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/blog_under_packages.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5047\" class=\" wp-image-5047\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/blog_under_packages-300x241.png\" alt=\"Bloc under packages has much more code because it is centralized\" width=\"551\" height=\"443\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/blog_under_packages-300x241.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/blog_under_packages-768x616.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/blog_under_packages.png 1005w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/a><p id=\"caption-attachment-5047\" class=\"wp-caption-text\">Bloc under packages has much more code because it is centralized<\/p><\/div>\r\n<p>A much better approach, I must say. Everything is tucked away in its own folder or subfolder; if you do not want to see it, it easily becomes invisible.<\/p>\r\n<p>This approach favors really small pieces of code. We will show on screen only <strong><span style=\"font-family: courier new, courier, monospace;\">surveys_screen.dart<\/span><\/strong>, and here is what its code looks like:<br \/><br \/><\/p>\r\n<div id=\"attachment_5049\" style=\"width: 602px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5049\" class=\" wp-image-5049\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen-300x184.png\" alt=\"Surveys screen using a Bloc architecture\" width=\"592\" height=\"363\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen-300x184.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen-1024x628.png 1024w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen-768x471.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_screen.png 1307w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/a><p id=\"caption-attachment-5049\" class=\"wp-caption-text\">Surveys screen using a Bloc architecture<\/p><\/div>\r\n<p>Notice that the screen that we want to show, <strong>SurveysBloc<\/strong>, is within a <strong>BlocProvider<\/strong>. It provides the environment for the actual form on the screen, which is in <strong>SurveysForm<\/strong> widget.<\/p>\r\n<p>Also note that even a very small widget such screen title gets its own file and class <strong>SurveysAppBar<\/strong> in <strong><span style=\"font-family: courier new, courier, monospace;\">surveys_app_bar.dart<\/span><\/strong>:<br \/><br \/><\/p>\r\n<div id=\"attachment_5052\" style=\"width: 736px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5052\" class=\" wp-image-5052\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar-300x140.png\" alt=\"Surveys appBar in its own class and file\" width=\"726\" height=\"339\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar-300x140.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar-1024x478.png 1024w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar-768x358.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/surveys_app_bar.png 1303w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/a><p id=\"caption-attachment-5052\" class=\"wp-caption-text\">Surveys appBar in its own class and file<\/p><\/div>\r\n<p>If you were wondering what does the app or the above code do, here is the screen it produces:<\/p>\r\n<div id=\"attachment_5054\" style=\"width: 302px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/forms_screen.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5054\" class=\" wp-image-5054\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/forms_screen-152x300.png\" alt=\"Forms screen with bloc structure in a Flutter app\" width=\"292\" height=\"576\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/forms_screen-152x300.png 152w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/forms_screen.png 380w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/a><p id=\"caption-attachment-5054\" class=\"wp-caption-text\">Forms screen with bloc structure in a Flutter app<\/p><\/div>\r\n<p>The exact functioning of the bloc code deserves a blog post of its own, so let us now turn to the additional structure of the app.<\/p>\r\n<h2>The UI Folder &#8212; Graphics Elements on the Screen<\/h2>\r\n<p>User Interface elements get their own folder. There will be, typically, three subfolders in it:<br \/><br \/><\/p>\r\n<table style=\"border-collapse: collapse; width: 100%;\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 20.4688%;\"><strong><span style=\"font-family: courier new, courier, monospace;\">screens<\/span><\/strong><\/td>\r\n<td style=\"width: 79.5313%;\">The majority of your apps files will be in these folders.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 20.4688%;\"><strong><span style=\"font-family: courier new, courier, monospace;\">themes<\/span><\/strong><\/td>\r\n<td style=\"width: 79.5313%;\">Usually, there are three or four files here, one for themes in general, the others to specify the concrete values for the theme. <br \/><br \/>Using themes with blocs is extremely easy, once you set it up, you can forget about it and still have it working like a charm.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 20.4688%;\"><strong><span style=\"font-family: courier new, courier, monospace;\">widgets<\/span><\/strong><\/td>\r\n<td style=\"width: 79.5313%;\">The heart and soul of Flutter, the widgets are small parts of screen property that are neither very complicated nor long. Not a full blown class and not just one line of <strong>Text<\/strong>. <br \/><br \/>Good candidates for widgets are app background, button text style, customized buttons of all kinds, euro sign, avatars and so on. If you use the same widget in two places in the app, put it into its own file and place into this folder.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Structure of Screen Folders<\/h2>\r\n<p>Here is what a typical structure of\u00a0 screens files looks like:<\/p>\r\n<div id=\"attachment_5059\" style=\"width: 596px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5059\" class=\" wp-image-5059\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure-300x177.png\" alt=\"Welcome screen structure of files\" width=\"586\" height=\"346\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure-300x177.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure-1024x603.png 1024w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure-768x452.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/welcome_screen_structure.png 1194w\" sizes=\"auto, (max-width: 586px) 100vw, 586px\" \/><\/a><p id=\"caption-attachment-5059\" class=\"wp-caption-text\">Welcome screen structure of files<\/p><\/div>\r\n<p>The widgets specific for the <strong>Welcome<\/strong> screen are <strong>WelcomeText<\/strong> and <strong>NewText<\/strong> so we place them here, in the <span style=\"font-family: courier new, courier, monospace;\">\/widgets<\/span> subfolder. Notice that there is a <span style=\"font-family: courier new, courier, monospace;\">\/view<\/span> subfolder beneath <span style=\"font-family: courier new, courier, monospace;\">\/welcome<\/span> and that there is <span style=\"font-family: courier new, courier, monospace;\">\/widgets<\/span> beneath that <span style=\"font-family: courier new, courier, monospace;\">\/view.<\/span> It is granularity once again &#8212; if you are working on the <strong>Welcome<\/strong> screen, you will find all of its files in one place and if not, you just look at the closed subfolder and scan on to something else to fix.<\/p>\r\n<h2>The utils Subfolder<\/h2>\r\n<p>The <em>utils<\/em> are the files that are not widgets &#8212; that is, have no presence on the screen, but still have some useful function. Basic examples are delete keyboard, dio logging or hex to color conversion. You can also use utils to convert latitude and longitude to string, control input data with regex, create a singleton and so on. <br \/><br \/>Here is what it looks like in a larger app:<\/p>\r\n<div id=\"attachment_5058\" style=\"width: 597px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5058\" class=\" wp-image-5058\" src=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new-300x201.png\" alt=\"Utils folder with BLOC structure of a Flutter app\" width=\"587\" height=\"393\" srcset=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new-300x201.png 300w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new-1024x685.png 1024w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new-768x514.png 768w, https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/utils_new.png 1211w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/a><p id=\"caption-attachment-5058\" class=\"wp-caption-text\">Utils folder with BLOC structure of a Flutter app<\/p><\/div>\r\n<p>These are the main parts of a Flutter app structured around the BLoC pattern. Code is taken from one of my apps I create for customers. If you want your app to be structured in this way, please contact me <a href=\"https:\/\/duskosavic.com\/blog\/\">here<\/a> or on <a href=\"https:\/\/www.linkedin.com\/in\/dusko-savic-741487149\/\">LinkedIn<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<div class=\"seriesmeta\">This entry is part 1 of 2 in the series <a href=\"https:\/\/duskosavic.com\/blog\/series\/developing-flutter-apps-with-bloc-pattern\/\" class=\"series-705\" title=\"Developing Flutter Apps with BLoC Pattern\">Developing Flutter Apps with BLoC Pattern<\/a><\/div><p>When using BLoC as the state management technique for your Flutter app, your best bet is to open a folder called packages and put all of the code for all of your BLoCs into it. BLoC in Packages Folder I&#8217;ve &hellip; <a href=\"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[572,1],"tags":[698,706,5,707,573,633,610,673],"series":[705],"class_list":["post-5009","post","type-post","status-publish","format-standard","hentry","category-flutter","category-programming","tag-bloc","tag-bloc-pattern","tag-dusko-savic","tag-felix-angelov","tag-flutter","tag-flutter-app","tag-flutter-development","tag-mobile-apps","series-developing-flutter-apps-with-bloc-pattern"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com<\/title>\n<meta name=\"description\" content=\"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com\" \/>\n<meta property=\"og:description\" content=\"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/\" \/>\n<meta property=\"og:site_name\" content=\"DuskoSavic.com\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-18T09:10:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png\" \/>\n<meta name=\"author\" content=\"Dusko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dusko\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/\"},\"author\":{\"name\":\"Dusko\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"headline\":\"How To Structure Flutter App When Using BLoC Pattern\",\"datePublished\":\"2021-11-18T09:10:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/\"},\"wordCount\":889,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"image\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc_architecture-300x204.png\",\"keywords\":[\"BLoC\",\"bloc pattern\",\"dusko savic\",\"felix angelov\",\"flutter\",\"Flutter app\",\"flutter development\",\"mobile apps\"],\"articleSection\":[\"Flutter\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/\",\"name\":\"How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc_architecture-300x204.png\",\"datePublished\":\"2021-11-18T09:10:33+00:00\",\"description\":\"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#primaryimage\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc_architecture.png\",\"contentUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/bloc_architecture.png\",\"width\":999,\"height\":680,\"caption\":\"Bloc architecture in Flutter apps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/how-to-structure-flutter-app-when-using-bloc-pattern\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Structure Flutter App When Using BLoC Pattern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/\",\"name\":\"DuskoSavic.com\",\"description\":\"Rapid Mobile Apps Development With Flutter\",\"publisher\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\",\"name\":\"Dusko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"caption\":\"Dusko\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com","description":"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.","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:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/","og_locale":"en_US","og_type":"article","og_title":"How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com","og_description":"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.","og_url":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/","og_site_name":"DuskoSavic.com","article_published_time":"2021-11-18T09:10:33+00:00","og_image":[{"url":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png","type":"","width":"","height":""}],"author":"Dusko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dusko","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#article","isPartOf":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/"},"author":{"name":"Dusko","@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"headline":"How To Structure Flutter App When Using BLoC Pattern","datePublished":"2021-11-18T09:10:33+00:00","mainEntityOfPage":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/"},"wordCount":889,"commentCount":0,"publisher":{"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"image":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#primaryimage"},"thumbnailUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png","keywords":["BLoC","bloc pattern","dusko savic","felix angelov","flutter","Flutter app","flutter development","mobile apps"],"articleSection":["Flutter","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/","url":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/","name":"How To Structure Flutter App When Using BLoC Pattern - DuskoSavic.com","isPartOf":{"@id":"https:\/\/duskosavic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#primaryimage"},"image":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#primaryimage"},"thumbnailUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture-300x204.png","datePublished":"2021-11-18T09:10:33+00:00","description":"Develop Flutter apps in a boring and predictable way, using BLoC pattern structured within packages architecture.","breadcrumb":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#primaryimage","url":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture.png","contentUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/bloc_architecture.png","width":999,"height":680,"caption":"Bloc architecture in Flutter apps"},{"@type":"BreadcrumbList","@id":"https:\/\/duskosavic.com\/blog\/flutter\/how-to-structure-flutter-app-when-using-bloc-pattern\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/duskosavic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Structure Flutter App When Using BLoC Pattern"}]},{"@type":"WebSite","@id":"https:\/\/duskosavic.com\/blog\/#website","url":"https:\/\/duskosavic.com\/blog\/","name":"DuskoSavic.com","description":"Rapid Mobile Apps Development With Flutter","publisher":{"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/duskosavic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396","name":"Dusko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","caption":"Dusko"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g"}}]}},"_links":{"self":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/5009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/comments?post=5009"}],"version-history":[{"count":15,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/5009\/revisions"}],"predecessor-version":[{"id":5067,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/5009\/revisions\/5067"}],"wp:attachment":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/media?parent=5009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/categories?post=5009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/tags?post=5009"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/series?post=5009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}