{"id":9941,"date":"2022-07-05T12:49:00","date_gmt":"2022-07-05T16:49:00","guid":{"rendered":"https:\/\/protovate.com\/blog\/?p=9941"},"modified":"2022-07-06T18:20:42","modified_gmt":"2022-07-06T22:20:42","slug":"tech-talk-flutter-3-vs-net-maui","status":"publish","type":"post","link":"https:\/\/protovate.com\/blog\/tech-talk-flutter-3-vs-net-maui\/","title":{"rendered":"Tech Talk:  Flutter 3 vs .NET MAUI 2022"},"content":{"rendered":"<p><span data-contrast=\"auto\">The month of May 2022 marks the release of both <\/span><a href=\"https:\/\/medium.com\/flutter\/whats-new-in-flutter-3-8c74a5bc32d0\"><span data-contrast=\"none\">Flutter 3<\/span><\/a><span data-contrast=\"auto\"> and <\/span><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/introducing-dotnet-maui-one-codebase-many-platforms\/\"><span data-contrast=\"none\">.NET MAUI<\/span><\/a><span data-contrast=\"auto\">, advancing cross-platform development forward. Flutter 3 brings stable support for macOS and Linux applications to complete their iOS, Android, web, and Windows platform capabilities. .NET MAUI brings the powerful C# language into the space, allowing development on Windows, iOS, Android and macOS.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p><span data-contrast=\"auto\">Cross-platform software development allows for easier rapid prototyping, and <\/span><a href=\"https:\/\/protovate.com\/protovate-about-our-company.html\"><span data-contrast=\"none\">our team<\/span><\/a><span data-contrast=\"auto\"> is constantly comparing the latest tools to facilitate faster product development.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p aria-level=\"1\"><strong>FLUTTER 3<\/strong><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:80,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p aria-level=\"2\"><span data-contrast=\"auto\">Overview:&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:120,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/flutter.dev\/\"><span data-contrast=\"none\">Flutter<\/span><\/a><span data-contrast=\"auto\"> is a cross-platform framework developed by Google in May 2017. It is built with the Dart programming language, a C-based language also developed by Google.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p aria-level=\"2\"><span data-contrast=\"auto\">How it Works:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:120,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\"><br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-9945 size-full\" src=\"https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-09.png\" alt=\"\" width=\"775\" height=\"637\" srcset=\"https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-09.png 775w, https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-09-300x247.png 300w, https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-09-768x631.png 768w, https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-09-600x493.png 600w\" sizes=\"(max-width: 775px) 100vw, 775px\" \/><\/span><span data-contrast=\"auto\"><br \/>\nFlutter uses the same Skia graphics rendering engine as Google Chrome. This allows the framework to write pixels directly to the screen instead of interacting with the native APIs. Because of this, the graphics rendering is independent of platform. This is how game engines render graphics. Game developers do not rewrite their code for each platform, they simply port the graphics rendering to each device. This makes Flutter more resilient to lower-level changes of&nbsp;native operating system APIs. The downside to&nbsp;this approach is felt on the web. Since Flutter is writing UIs pixel by pixel, the web implementation writes these pixels to a single canvas element. This makes some of the more standard web browser actions (right clicks, control-f searching, etc.) harder to implement.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/docs.flutter.dev\/resources\/architectural-overview\"><b><span data-contrast=\"none\">Flutter Architecture Overview<\/span><\/b><\/a><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335551550&quot;:2,&quot;335551620&quot;:2,&quot;335559739&quot;:160,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p aria-level=\"3\"><span data-contrast=\"auto\">PROS:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<ul>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"28\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Fastest growing cross-platform framework.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"28\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Renders UI independent of the platform it is running on, making it more resilient to Native APIs changing.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"28\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"auto\">More easily portable to smart devices such as watches, TVs, and other wearable technologies.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<\/ul>\n<p aria-level=\"3\"><span data-contrast=\"auto\">CONS:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<ul>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"30\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">The pool of available Dart developers is small, but luckily it is not a particularly difficult language to learn.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335551550&quot;:1,&quot;335551620&quot;:1,&quot;335559685&quot;:720,&quot;335559737&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312,&quot;335559991&quot;:360}\">&nbsp;<\/span><\/li>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"30\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Web support is limited to a single canvas.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335551550&quot;:1,&quot;335551620&quot;:1,&quot;335559685&quot;:720,&quot;335559737&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312,&quot;335559991&quot;:360}\">&nbsp;<\/span><\/li>\n<\/ul>\n<p aria-level=\"1\"><span data-contrast=\"auto\"><strong>.NET MAUI<\/strong>&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:80,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p aria-level=\"2\"><span data-contrast=\"auto\">Overview:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:120,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/dotnet.microsoft.com\/en-us\/apps\/maui\"><span data-contrast=\"none\">.NET MAUI<\/span><\/a><span data-contrast=\"auto\"> is the evolution of Xamarin.Forms, a cross platform mobile application framework that targeted iOS, Android, and Windows. Visit <\/span><a href=\"https:\/\/www.syncfusion.com\/blogs\/post\/xamarin-versus-net-maui.aspx\"><span data-contrast=\"none\">Syncfusion<\/span><\/a><span data-contrast=\"auto\"> for a detailed writeup on the differences between .NET MAUI and Xamarin.Forms. It is included in .NET 6 and is touted as the primary UI development kit for .NET 6 going forward.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p aria-level=\"2\"><span data-contrast=\"auto\">How it Works:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:120,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\"><br \/>\n<img loading=\"lazy\" class=\"size-full wp-image-9946 aligncenter\" src=\"https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-24.png\" alt=\"\" width=\"721\" height=\"446\" srcset=\"https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-24.png 721w, https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-24-300x186.png 300w, https:\/\/protovate.com\/blog\/wp-content\/uploads\/2022\/06\/2022-06-03_9-46-24-600x371.png 600w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><br \/>\n<\/span><\/p>\n<p><span data-contrast=\"auto\">MAUI works similarly to other cross-platform frameworks like Ionic\/Capasitor.js or React Native. These frameworks abstract away the native controls (buttons, checkboxes, camera access, etc.) of each target device. This is accomplished by a platform specific .NET framework for Android, iOS, and macOS, and is implemented by the Mono Runtime environment.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/maui\/what-is-maui\"><b><span data-contrast=\"none\">.NET MAUI Architectural Overview<\/span><\/b><\/a><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335551550&quot;:2,&quot;335551620&quot;:2,&quot;335559739&quot;:160,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p aria-level=\"3\"><span data-contrast=\"auto\">PROS:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<ul>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"25\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">A large pool of C# developers is available to code cross-platform.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"25\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Leverages the large ecosystem of .NET to encourage code reuse.&nbsp;<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<\/ul>\n<p aria-level=\"3\"><span data-contrast=\"auto\">CONS:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<ul>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"23\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:1440,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"3\" data-aria-level=\"2\"><span data-contrast=\"auto\">.NET MAUI does not support web. Developers can utilize the Blazor framework to provide a bridge to use MAUI resources. <\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559685&quot;:720,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"23\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:1440,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"4\" data-aria-level=\"2\"><span data-contrast=\"auto\">.NET MAUI does not support Linux.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559685&quot;:720,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"o\" data-font=\"Courier New\" data-listid=\"23\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:1440,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Courier New&quot;,&quot;469769242&quot;:[9675],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;o&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"2\"><span data-contrast=\"auto\">.NET MAUI does not bring many new innovations to the cross-platform domain.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559685&quot;:720,&quot;335559739&quot;:160,&quot;335559740&quot;:312}\">&nbsp;<\/span><\/li>\n<\/ul>\n<p aria-level=\"1\"><strong>THE FUTURE OF CROSS-PLATFORM<\/strong><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:80,&quot;335559739&quot;:80,&quot;335559740&quot;:240}\">&nbsp;<\/span><\/p>\n<p><span data-contrast=\"auto\">Flutter is currently the fastest growing cross-platform development framework available. .NET MAUI has some clear shortcomings and has a way to go to reach the maturity of Flutter. Google has clearly carved out an early lead in the latest technology race. But can they sustain this pace? According to the most used frameworks poll from <\/span><a href=\"https:\/\/www.statista.com\/statistics\/793840\/worldwide-developer-survey-most-used-frameworks\/\"><span data-contrast=\"none\">Statistica<\/span><\/a><span data-contrast=\"auto\">, the .NET Framework and .NET Core are two of the top three most popular frameworks.<\/span><\/p>\n<p>Google and Flutter are making great strides in advancing cross-platform technologies, but the slow and steady enterprise-level Microsoft has the market share to create a dominant framework as .NET MAUI matures.<\/p>\n<div class=\"mceTemp\"><\/div>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>The month of May 2022 marks the release of both Flutter 3 and .NET MAUI, advancing cross-platform development forward. Flutter 3 brings stable support for macOS and Linux applications to complete their iOS, Android, web, and Windows platform capabilities<\/p>\n","protected":false},"author":1,"featured_media":9942,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[140,137,128,136],"tags":[154,153,155,142],"_links":{"self":[{"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/posts\/9941"}],"collection":[{"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/comments?post=9941"}],"version-history":[{"count":28,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/posts\/9941\/revisions"}],"predecessor-version":[{"id":10270,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/posts\/9941\/revisions\/10270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/media\/9942"}],"wp:attachment":[{"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/media?parent=9941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/categories?post=9941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/protovate.com\/blog\/wp-json\/wp\/v2\/tags?post=9941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}