{"id":7762,"date":"2021-07-27T02:35:13","date_gmt":"2021-07-27T02:35:13","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=7762\/"},"modified":"2022-07-01T17:00:29","modified_gmt":"2022-07-01T17:00:29","slug":"architect-flutter-projects","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/","title":{"rendered":"How to architect delightful Flutter projects"},"content":{"rendered":"<p>Flutter is a Google framework used to build natively compiled applications for mobile, web, desktop and embedded devices with a single codebase. You can easily start a new Flutter project by following the guide: <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\" target=\"_blank\" rel=\"noopener noreferrer\">Getting started &#8211; Flutter<\/a>.<\/p>\n<p>Cheesecake Labs is currently the <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/technology-gold-winners-top-10-worldwide\/\">TOP #10 Mobile and Web App Development Company Worldwide<\/a> and has delivered awesome digital products to our clients including Flutter apps.<br \/>\n<!--more--><\/p>\n<p>When discussing architecture on Flutter apps, there are many ways to structure your code and widgets. The main goal of this proposal is to make your project easy to scale and keep everything organized at same time.<\/p>\n<p>On this post, we&#8217;ll use the following packages:<\/p>\n<ul>\n<li><a href=\"https:\/\/pub.dev\/packages\/dio\" target=\"_blank\" rel=\"noopener noreferrer\">Dio<\/a>: A powerful HTTP client for Dart<\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/get_it\" target=\"_blank\" rel=\"noopener noreferrer\">GetIt<\/a>: A simple service locator for Flutter and Dart<\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/flutter_bloc\" target=\"_blank\" rel=\"noopener noreferrer\">Flutter BLoC<\/a>: A package that helps implement the BLoC pattern<\/li>\n<\/ul>\n<h2>Creating a base structure<\/h2>\n<p>When you start a new project from scratch, you may have a project structure like this:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">.\n\u251c\u2500\u2500 android\n\u251c\u2500\u2500 assets\n\u251c\u2500\u2500 build\n\u251c\u2500\u2500 ios\n\u251c\u2500\u2500 lib\n\u251c\u2500\u2500 test\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 analysis_options.yaml\n\u251c\u2500\u2500 pubspec.lock\n\u251c\u2500\u2500 pubspec.yaml<\/code><\/pre>\n<p>So let&#8217;s start setting up our directories in the lib folder as below:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">.\n\u251c\u2500\u2500 components\n\u251c\u2500\u2500 constants\n\u251c\u2500\u2500 core\n\u251c\u2500\u2500 interfaces\n\u251c\u2500\u2500 middlewares\n\u251c\u2500\u2500 modules\n\u251c\u2500\u2500 utils\n\u251c\u2500\u2500 main.dart\n\u2514\u2500\u2500 routes.dart<\/code><\/pre>\n<p>Now our basic structure is set up! Don&#8217;t worry about all those folders and files, throughout the next topics we&#8217;ll cover the purpose of each one and why we need all of them.<\/p>\n<h2>Components: Atomic Widgets<\/h2>\n<p>Like React\/React Native projects here at Cheesecake Labs, we work with Atomic System\/Components to make our widgets more reusable and organized.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7764 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-Atomic-Widgets.jpg\" alt=\"\" width=\"1024\" height=\"768\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-Atomic-Widgets.jpg 1024w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-Atomic-Widgets-768x576.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p style=\"text-align: center;\"><em>source: Brad Frost (2016)<\/em><\/p>\n<p>In essence, we structure the components as:<\/p>\n<ul>\n<li><strong>Atoms:<\/strong> The fundamental components like custom texts, buttons, icons and typography.<\/li>\n<li><strong>Molecules:<\/strong> Basically, they are groups of atoms. One example is a list tile.<\/li>\n<li><strong>Organisms:<\/strong> They are an association of molecules, like a custom list or a form.<\/li>\n<li><strong>Templates:<\/strong> They are the final structure composed by organisms. Our pages\/screens will use a template instance to set the real content.<\/li>\n<\/ul>\n<p>Considering the information above, we can organize the components folder like:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">.\n\u251c\u2500\u2500 atoms\n\u251c\u2500\u2500 molecules\n\u251c\u2500\u2500 organisms\n\u2514\u2500\u2500 templates<\/code><\/pre>\n<p>If you want to dive into Atomic System, we recommend the following articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/rethinking-atomic-design-react-projects\/\">Rethinking Atomic React<\/a><\/li>\n<li><a href=\"https:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic Design by Brad Frost<\/a><\/li>\n<\/ul>\n<h2>What are constants?<\/h2>\n<p>Constants are the code that is immutable in your application. The following can be considered a constant:<\/p>\n<ul>\n<li>Colors<\/li>\n<li>Styles<\/li>\n<li>Specific numbers<\/li>\n<\/ul>\n<p>For example, if you need to change the color of the application or the size of the font that you are using, you&#8217;ll need to replace the old constant value in one file only.<\/p>\n<h2>The application core<\/h2>\n<p>The core layer is responsible for the services which the app will use all along its lifecycle. There are two core services we usually set up:<\/p>\n<h3>Dependency Injection<\/h3>\n<p>We can create a dart file and register our instances as the following:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nGetIt getIt = GetIt.instance;\n\nvoid startGetItModules() {\n  _networkModules();\n  ...\n}\n\nvoid _networkModules() {\n  getIt.registerSingleton&lt;Dio&gt;(\n    HttpHelper(dotenv.env['BASE_URL']!).addInterceptor(AuthInterceptor()).dio,\n  );\n}\n...<\/code><\/pre>\n<p>It will allow us to provide dependencies to our classes, keep the instances easy to change for different implementations, and help separate the module layers.<\/p>\n<h3>Navigation<\/h3>\n<p>To help us work with navigation more efficiently, let&#8217;s create a custom navigator:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nclass RouteNavigator {\n  static final GlobalKey&lt;NavigatorState&gt; navigatorKey = \n       GlobalKey&lt;NavigatorState&gt;();\n\n  static Future&lt;dynamic&gt;? pushReplacementNamed&lt;Arguments&gt;(\n  {required String routeName, Arguments? arguments}) {\n    return navigatorKey.currentState\n        ?.pushReplacementNamed(routeName, arguments: arguments);\n  }\n\n  static void pop() {\n    navigatorKey.currentState?.pop();\n  }\n  ...\n}<\/code><\/pre>\n<p>And to start using this navigator, you need to pass the navigatorKey to your<br \/>\nMaterialApp.<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nclass MyApp extends StatelessWidget {\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'My App',\n      navigatorKey: RouteNavigator.navigatorKey,\n      onGenerateRoute: (routeSettings) {\n         return MaterialPageRoute(builder: routes[routeSettings.name]!);\n      },\n      ...\n    );\n  }\n}<\/code><\/pre>\n<p>By using this class, we&#8217;ll be able to navigate through the app with no context required, just by calling:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nRouteNavigator.pushNamed(...).\n<\/code><\/pre>\n<h2>Interfaces<\/h2>\n<p>When we develop an app, we usually need to communicate with an API or some external resource, such as a local database and sensors. So, the interfaces folder is the place where you store the files that will help you with this communication.<\/p>\n<p>A common example is the creation of a Dio instance to work with HTTP Requests:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nclass HttpHelper {\n  final String _url;\n  late final BaseOptions _options;\n  late final Dio _dio;\n  Dio get dio =&gt; _dio;\n\n  HttpHelper(this._url) {\n    _buildBaseOptions();\n    _buildHttp();\n  }\n\n  void _buildBaseOptions() {\n    _options = BaseOptions(\n      baseUrl: _url,\n      responseType: ResponseType.json,\n    );\n  }\n\n  void _buildHttp() {\n    _dio = Dio(_options);\n  }\n\n  HttpHelper addInterceptor(Interceptor interceptor) {\n    _dio.interceptors.add(interceptor);\n\n    return this;\n  }\n}<\/code><\/pre>\n<h2>Middlewares<\/h2>\n<p>Middlewares are responsible for providing an extension to an event or action from your application. This can be an HTTP request interceptor, a logger or something similar.<\/p>\n<p>Here you can see an example of a middleware that throws a custom error when the request to an API returns the status code 401:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">\nclass AuthInterceptor extends Interceptor {\n  @override\n  void onError(DioError err, ErrorInterceptorHandler handler) {\n    if (err.response != null) {\n      if (err.response?.statusCode == 401) {\n        throw UnauthorizedException();\n      }\n    }\n    handler.next(err);\n  }\n}<\/code><\/pre>\n<h2>Modules: A hexagonal architecture approach<\/h2>\n<p>This folder is the most important, as it contains all modules that implement our features and its business rules. Here we&#8217;ll use an hexagonal architecture approach in a way that allows us to separate our application layer from the domain layer and the infrastructure layer. So, every module will be structured according to the following architecture:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7765 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-hexagonal-architecture.png\" alt=\"\" width=\"851\" height=\"631\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-hexagonal-architecture.png 851w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/flutter-hexagonal-architecture-768x569.png 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/p>\n<p>With this architecture, the code will be more organized, but we also need to modularize it to make it easy to add a new feature, modify the old ones and make the code more reusable.<\/p>\n<p>So, we suggest you structure the modules as:<\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">.\n\u2514\u2500\u2500 feature\n  \u251c\u2500\u2500 blocs\n  \u2502\n  \u251c\u2500\u2500 data\n  \u2502 \u2514\u2500\u2500 datasource \/\/abstract datasources\n  \u2502 \u2514\u2500\u2500 repositories \/\/implementation of abstract repositories\n  \u2502\n  \u251c\u2500\u2500 datasource \/\/implementation of abstract datasources\n  \u2502\n  \u251c\u2500\u2500 domain\n  \u2502 \u2514\u2500\u2500 entities\n  \u2502 \u2514\u2500\u2500 repositories \/\/abstract repositories\n  \u2502\n  \u2514\u2500\u2500 screens<\/code><\/pre>\n<p>Separating the modules this way allows us to use different implementations for every layer. We can, for example, create multiple different screens with the same domain logic or even change all the data source providers without affecting the entire application. For example, our app is separated into independent pieces which are able to work individually.<\/p>\n<p>Moreover, this approach supports testability, which is a good point for building a reliable project and improving code quality.<\/p>\n<h2>Conclusion<\/h2>\n<p>When you are dealing with complex projects that contain many features, this architecture is a lot of help when it comes to keeping everything organized, easy to modify, and extremely simple to maintain and to test the code along the development process.<\/p>\n<p>This is just an efficient way we&#8217;ve come up with to structure our Flutter projects here at Cheesecake Labs and we hope it helps you as well.<\/p>\n<p>Would you like to know more about how to use Flutter to get your project off the drawing board? Contact us!!<\/p>\n<h2>References<\/h2>\n<ul>\n<li><a href=\"https:\/\/martinfowler.com\/bliki\/PresentationDomainDataLayering.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/martinfowler.com\/bliki\/PresentationDomainDataLayering.html<\/a><\/li>\n<li><a href=\"https:\/\/resocoder.com\/2020\/03\/09\/flutter-firebase-ddd-course-1-domain-driven-design-principles\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/resocoder.com\/2020\/03\/09\/flutter-firebase-ddd-course-1-domain-driven-design-principles\/<\/a><\/li>\n<li><a href=\"https:\/\/bloclibrary.dev\/#\/architecture\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/bloclibrary.dev\/#\/architecture<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/flutterdevs\/explore-clean-architecture-in-flutter-3fff83e0f1f2\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/medium.com\/flutterdevs\/explore-clean-architecture-in-flutter-3fff83e0f1f2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is a Google framework used to build natively compiled applications for mobile, web, desktop and embedded devices with a single codebase. You can easily start a new Flutter project by following the guide: Getting started &#8211; Flutter. Cheesecake Labs is currently the TOP #10 Mobile and Web App Development Company Worldwide and has delivered [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":7763,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[305,54],"class_list":["post-7762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-development","tag-tag-mobile-app-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to architect delightful Flutter projects<\/title>\n<meta name=\"description\" content=\"Dealing with complex mobile app projects? Discover an efficient way we&#039;ve come up with to structure our Flutter projects here at Cheesecake Labs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to architect delightful Flutter projects\" \/>\n<meta property=\"og:description\" content=\"Dealing with complex mobile app projects? Discover an efficient way we&#039;ve come up with to structure our Flutter projects here at Cheesecake Labs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-27T02:35:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:00:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s3.amazonaws.com\/ckl-website-static\/wp-content\/uploads\/2021\/07\/Linkedin-Flutter-Architecture.png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to architect delightful Flutter projects\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/s3.amazonaws.com\/ckl-website-static\/wp-content\/uploads\/2021\/07\/Linkedin-Flutter-Architecture.png\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\"},\"author\":{\"name\":\"Leandro Pontes Berleze\"},\"headline\":\"How to architect delightful Flutter projects\",\"datePublished\":\"2021-07-27T02:35:13+00:00\",\"dateModified\":\"2022-07-01T17:00:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\"},\"wordCount\":923,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png\",\"keywords\":[\"development\",\"mobile app development\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\",\"name\":\"How to architect delightful Flutter projects\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png\",\"datePublished\":\"2021-07-27T02:35:13+00:00\",\"dateModified\":\"2022-07-01T17:00:29+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Leandro Pontes Berleze\"},\"description\":\"Dealing with complex mobile app projects? Discover an efficient way we've come up with to structure our Flutter projects here at Cheesecake Labs.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png\",\"width\":2000,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to architect delightful Flutter projects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Leandro Pontes Berleze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png\",\"caption\":\"Leandro Pontes Berleze\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/leandropberleze\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to architect delightful Flutter projects","description":"Dealing with complex mobile app projects? Discover an efficient way we've come up with to structure our Flutter projects here at Cheesecake Labs.","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:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/","og_locale":"en_US","og_type":"article","og_title":"How to architect delightful Flutter projects","og_description":"Dealing with complex mobile app projects? Discover an efficient way we've come up with to structure our Flutter projects here at Cheesecake Labs.","og_url":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2021-07-27T02:35:13+00:00","article_modified_time":"2022-07-01T17:00:29+00:00","og_image":[{"url":"https:\/\/s3.amazonaws.com\/ckl-website-static\/wp-content\/uploads\/2021\/07\/Linkedin-Flutter-Architecture.png","type":"","width":"","height":""}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_title":"How to architect delightful Flutter projects","twitter_image":"https:\/\/s3.amazonaws.com\/ckl-website-static\/wp-content\/uploads\/2021\/07\/Linkedin-Flutter-Architecture.png","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/"},"author":{"name":"Leandro Pontes Berleze"},"headline":"How to architect delightful Flutter projects","datePublished":"2021-07-27T02:35:13+00:00","dateModified":"2022-07-01T17:00:29+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/"},"wordCount":923,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png","keywords":["development","mobile app development"],"articleSection":["Engineering"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/","url":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/","name":"How to architect delightful Flutter projects","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png","datePublished":"2021-07-27T02:35:13+00:00","dateModified":"2022-07-01T17:00:29+00:00","author":{"@type":"person","name":"Leandro Pontes Berleze"},"description":"Dealing with complex mobile app projects? Discover an efficient way we've come up with to structure our Flutter projects here at Cheesecake Labs.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/07\/Blog-Hero-Flutter-Architecture.png","width":2000,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/architect-flutter-projects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to architect delightful Flutter projects"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Leandro Pontes Berleze","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png","caption":"Leandro Pontes Berleze"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/leandropberleze\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/7762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=7762"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/7762\/revisions"}],"predecessor-version":[{"id":11251,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/7762\/revisions\/11251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/7763"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=7762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=7762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=7762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}