{"id":3703,"date":"2020-07-10T14:43:37","date_gmt":"2020-07-10T12:43:37","guid":{"rendered":"https:\/\/www.basyskom.de\/?p=3703"},"modified":"2025-02-13T09:07:54","modified_gmt":"2025-02-13T08:07:54","slug":"the-technology-thursday-episode-2-how-to-flutter-on-an-embedded-device","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/the-technology-thursday-episode-2-how-to-flutter-on-an-embedded-device\/","title":{"rendered":"How to run Flutter on an Embedded Device"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3703\" class=\"elementor elementor-3703\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fd643a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"fd643a3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a0f6e07\" data-id=\"a0f6e07\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec7a40e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ec7a40e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e477df6 elementor-widget elementor-widget-heading\" data-id=\"e477df6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">New blog articles on the topic from 2025:\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8931afe elementor-posts--thumbnail-none elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-card-shadow-yes elementor-posts__hover-gradient elementor-widget elementor-widget-posts\" data-id=\"8931afe\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;cards_columns&quot;:&quot;3&quot;,&quot;cards_columns_tablet&quot;:&quot;2&quot;,&quot;cards_columns_mobile&quot;:&quot;1&quot;,&quot;cards_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;cards_row_gap_widescreen&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;cards_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;cards_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"posts.cards\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-grid\" role=\"list\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-11474 post type-post status-publish format-standard has-post-thumbnail hentry category-allgemein category-blog category-flutter category-newsletter-2025-01 tag-flutter\" role=\"listitem\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/www.basyskom.de\/en\/state-of-flutter-on-embedded-linux\/\" >\n\t\t\t\tState of Flutter on Embedded Linux\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Flutter, originally designed for mobile applications, has evolved to support a wide range of platforms, including embedded Linux. In this article, we explore why Flutter might be a viable choice for your embedded project, weigh its pros and cons, and compare it to Qt to see if it stands as a strong alternative.<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/www.basyskom.de\/en\/state-of-flutter-on-embedded-linux\/\" aria-label=\"Read more about State of Flutter on Embedded Linux\" tabindex=\"-1\" >\n\t\t\tWeiterlesen \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t11\/26\/2024\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tNo Comments\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-11590 post type-post status-publish format-standard has-post-thumbnail hentry category-blog category-flutter category-newsletter-2025-01 tag-flutter\" role=\"listitem\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/www.basyskom.de\/en\/how-does-flutter-work-on-embedded\/\" >\n\t\t\t\tHow does Flutter work on Embedded\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Learn about the different Flutter Embedders for embedded Linux! What choices do you have and which aligns best to your project goals?<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/www.basyskom.de\/en\/how-does-flutter-work-on-embedded\/\" aria-label=\"Read more about How does Flutter work on Embedded\" tabindex=\"-1\" >\n\t\t\tWeiterlesen \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t01\/27\/2025\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tNo Comments\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-11618 post type-post status-publish format-standard has-post-thumbnail hentry category-allgemein category-blog category-flutter category-newsletter-2025-01 tag-flutter\" role=\"listitem\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/www.basyskom.de\/en\/flutter-on-embedded-hmi-mobile-apps-and-middleware\/\" >\n\t\t\t\tFlutter on Embedded: HMI, Mobile Apps and Middleware\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>In this blog we show you a possible architecture approach to increase cross platform reusability of your Flutter HMI Code. From Embedded to Mobile to Desktop.<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/www.basyskom.de\/en\/flutter-on-embedded-hmi-mobile-apps-and-middleware\/\" aria-label=\"Read more about Flutter on Embedded: HMI, Mobile Apps and Middleware\" tabindex=\"-1\" >\n\t\t\tWeiterlesen \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t01\/30\/2025\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tNo Comments\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a22ea5 elementor-widget elementor-widget-heading\" data-id=\"8a22ea5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-default\">Note: As of 2025 the following content might be outdated, check the above articles to get a more recent perspective on how to run flutter on an embedded device!<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7527585 elementor-widget elementor-widget-text-editor\" data-id=\"7527585\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Implementing cross platform HMIs is something we at basysKom do on a daily basis. Usually we use either Qt\/QML or Web Technologies, but we are always looking at a broader spectrum of options to provide our customers the best possible solution.<\/p><p>Flutter is one of those other options. It is an UI Framework based on Dart, made by Google. While the primary focus of Flutter are mobile platforms like iOS and Android with a growing support for the Web, Flutter is also heading towards Linux and Windows. Interesting to know is that Google uses Flutter to provide the HMI for their own embedded devices and that it will become even more important once Fuchsia does succeed Android, since it will be the primary Ui Framework of Fuchsia.<\/p><p>So I wondered if it is possible to run Flutter on an UX-Gruppe MACH platform (which is an iMX.6 SOC). The short answer is: Yes it is possible.<\/p><p>In this blog I will explain how you can setup everything to compile and run Flutter for and on a generic ARMv7 Embedded Linux target. Since I do not know which hardware you may have at hand, I need to assume that you will be able to fill the gaps. An i.MX6 with a recent Buildroot or Yocto BSP is a good starting point.<\/p><p>I will show you the basic dependencies and command lines you need in order to cross-compile Flutter for ARMv7. What you can also expect is a general instruction of what needs to be done in order to finally run a Flutter App on your platform (after you compiled the engine).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a8a8ce elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"6a8a8ce\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e811862\" data-id=\"e811862\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-de8e346 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"de8e346\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-measurement\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f572d9 elementor-widget elementor-widget-text-editor\" data-id=\"4f572d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Hardware Requirements<\/h2><div>The mentioned specs are simply the spec of the hardware I used, they are not necessarily the minimum hardware requirements of Flutter on Embedded.\u00a0<\/div><div>As mentioned, I use our own UX-Gruppe Hardware, an Ultratronic Mach Platform evaluation board with a single core iMX.6 and 1 GB of Memory. The ARMv7 iMX.6 comes with an integrated graphic chip.\u00a0 The touch-display draws in 1280x800px with 60hz.<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8edc537 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"8edc537\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-129671c\" data-id=\"129671c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-59cbf30 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"59cbf30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-ice-cream\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db1f788 elementor-widget elementor-widget-text-editor\" data-id=\"db1f788\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>SDK Requirements<\/h2><p>All my work is done on a Thinkpad X1, running Windows 10 with an Ubuntu 18.04 executed within the Windows Linux Subsystem Version 1.0.\u00a0 You can of course simply run Linux natively, it&#8217;s your choice.<\/p><p>The UX-Gruppe hardware comes with a Buildroot Embedded Linux and an SDK\/cross-toolchain for ARMv7 containing Clang\/LLVM.<\/p><p>Make sure you have an SDK in place that is, in general, able to cross-compile to ARMv7. Ideally your SDK already supports Clang\/LLVM, if not, you can of course try to build it on your own, including the required build-tools. Though this is not a trivial task and it may take you a moment or two.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d818107 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"d818107\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-f7b8657\" data-id=\"f7b8657\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-225e34a elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"225e34a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-bulb\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6f5bfc5\" data-id=\"6f5bfc5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-237a7e1 elementor-widget elementor-widget-text-editor\" data-id=\"237a7e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Preparing Clang\/LLVM Toolchain for your SDK<\/h2><p>This is a little sidetrack since I didn&#8217;t actually needed to do it. This is something that you may only need to follow in case your SDK does either not come with any, or a not a recent enough Clang\/LLVM support. Expect some stormy weather here, it all depends on the state of the SDK you are using to do this. You should know what you do since I can only give you orientation but not the path.<\/p><h3>Get and build Clang\/LLVM<\/h3><p>To be sure you use the latest instructions, you can find them\u00a0<a href=\"https:\/\/clang.llvm.org\/get_started.html\" target=\"_blank\" rel=\"noopener\">here<\/a>. Ensure your host fulfills the <a style=\"background-color: #ffffff;\" href=\"https:\/\/llvm.org\/docs\/GettingStarted.html#requirements\" target=\"_blank\" rel=\"noopener\">general dependencies<\/a>. Of course you need cmake, git, ssh,&#8230; .<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717bb4c elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"717bb4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>#Setup working directory\ncd ~\nmkdir flutter-exp\ncd flutter-exp\n\n#Clone llvm \ngit clone https:\/\/github.com\/llvm\/llvm-project.git\ncd llvm-project\n\n#create build directory\nmkdir build\ncd build\n\n#Build the TOOLCHAIN\ncmake ..\/llvm \\\n    -DLLVM_TARGETS_TO_BUILD=ARM \\\n    -DLLVM_DEFAULT_TARGET_TRIPLE=arm-linux-gnueabihf \\\n    -DCMAKE_BUILD_TYPE=Release \\\n    -DCMAKE_INSTALL_PREFIX=\/PATH\/TO\/YOUR\/SDK\n    \nmake # consider some -j \nmake install  <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c68853 elementor-widget elementor-widget-text-editor\" data-id=\"1c68853\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Get and compile Bintools<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e32f4fe elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"e32f4fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>#Setup working directory\ncd ~\n#mkdir flutter-exp\ncd flutter-exp\n\ngit clone git:\/\/sourceware.org\/git\/binutils-gdb.git\n\ncd binutils-gdb\n\n.\/configure --prefix=&quot;\/PATH\/TO\/YOUR\/SDK&quot; \\\n    --enable-ld                       \\\n    --target=arm-linux-gnueabihf\nmake\nmake install\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1984f1e elementor-widget elementor-widget-text-editor\" data-id=\"1984f1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"3a05\" class=\"il im dg az ay in io ip iq ir is it iu iv iw ix iy\"><strong class=\"bl\">Get and compile libcxx<\/strong>\u00a0and libcxxabi<\/h3><p>This might be the most troublesome part. In order to avoid issues you want to be sure that the libc you are using to build the engine is new enough to support the requirements of the flutter engine.\u00a0<\/p><p>In order to avoid breaking your embedded system by introducing a new libc I recommend to compile and link and provide them as static lib.<\/p><p>You already have checked out sources for both together with llvm-project.<\/p><h4>Build libcxxabi<\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39ecb15 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"39ecb15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>cd ~\r\ncd flutter-exp\r\ncd llvm-project\r\ncd build \r\n\r\ncmake ..\/llvm\/projects\/libcxxabi \\\r\n    -DCMAKE_CROSSCOMPILING=True \\\r\n    -DLLVM_TARGETS_TO_BUILD=ARM \\\r\n    -DCMAKE_SYSROOT=\/PATH\/TO\/YOUR\/SDK\/sysroot #NOTICE SYSROOT HERE! \\\r\n    -DCMAKE_INSTALL_PREFIX=\/PATH\/TO\/YOUR\/SDK \\\r\n    -DCMAKE_BUILD_TYPE=Release \\\r\n    -DCMAKE_SYSTEM_NAME=Linux \\\r\n    -DCMAKE_SYSTEM_PROCESSOR=ARM \\\r\n    -DCMAKE_C_COMPILER=\/PATH\/TO\/YOUR\/SDK\/bin\/clang \\\r\n    -DCMAKE_CXX_COMPILER=\/PATH\/TO\/YOUR\/SDK\/bin\/clang++ \\\r\n    -DLIBCXX_ENABLE_SHARED=False \\\r\n    -DLIBCXXABI_ENABLE_EXCEPTIONS=False \r\nmake # consider some -j \r\nmake check-cxx # Test\r\nmake install-cxxabi\r\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c362409 elementor-widget elementor-widget-text-editor\" data-id=\"c362409\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Build libcxx<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33ee7a6 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"33ee7a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>cd ~\r\ncd flutter-exp\r\ncd llvm-project\r\ncd build \r\n\r\n# you may have trouble here because  __cxxabi_config.h\r\n# and cxxabi.h are not placed in \/PATH\/TO\/YOUR\/SDK\/include\/c++\/v1 \r\n# find them and copy them there.\r\n\r\ncmake ..\/llvm\/projects\/libcxx \\\r\n    -DCMAKE_CROSSCOMPILING=True \\\r\n    -DLLVM_TARGETS_TO_BUILD=ARM \\\r\n    -DCMAKE_SYSROOT=\/PATH\/TO\/YOUR\/SDK\/sysroot #NOTICE SYSROOT HERE! \\\r\n    -DCMAKE_INSTALL_PREFIX=\/PATH\/TO\/YOUR\/SDK \\\r\n    -DCMAKE_BUILD_TYPE=Release \\\r\n    -DCMAKE_SYSTEM_NAME=Linux \\\r\n    -DCMAKE_SYSTEM_PROCESSOR=ARM \\\r\n    -DCMAKE_C_COMPILER=\/PATH\/TO\/YOUR\/SDK\/bin\/clang \\\r\n    -DCMAKE_CXX_COMPILER=\/PATH\/TO\/YOUR\/SDK\/bin\/clang++ \r\n    -DLIBCXX_ENABLE_SHARED=False \\\r\n    -DLIBCXX_ENABLE_EXCEPTIONS=False \\\r\n    -DLIBCXX_CXX_ABI=libcxxabi \\\r\n    -DLIBCXX_CXX_ABI_INCLUDE_PATHS=\/PATH\/TO\/YOUR\/SDK\/include\/c++\/v1 \\\r\n    -DLIBCXX_CXX_ABI_LIBRARY_PATH=\/PATH\/TO\/YOUR\/SDK\/lib \\\r\n    -DLIBCXX_ENABLE_STATIC_ABI_LIBRARY=True\r\nmake # consider some -j \r\nmake check-cxx # Test\r\nmake install-cxx\r\n\r\n\r\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13ec361 elementor-widget elementor-widget-text-editor\" data-id=\"13ec361\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Congrats! If you managed to get here with(out) trouble, you are all set to build your own Flutter-Engine.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c8a0a18 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"c8a0a18\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9f514af\" data-id=\"9f514af\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-19f9ad9 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"19f9ad9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-worker-cap\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d87e531 elementor-widget elementor-widget-text-editor\" data-id=\"d87e531\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Cross Compiling Flutter for ARM<\/h2><p><span style=\"font-family: 'PT Sans', sans-serif; font-weight: bold; letter-spacing: 1px;\">Setup your Environment<\/span><\/p><div>First, get the Chromium depot tools.\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1bece2 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"c1bece2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>cd ~\nmkdir flutter-exp\n\ngit clone https:\/\/chromium.googlesource.com\/chromium\/tools\/depot_tools.git\n\n#consider this to be added to your ~\/.bashrc\nexport PATH=~\/flutter-exp\/depot_tools:$PATH\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdf55a2 elementor-widget elementor-widget-text-editor\" data-id=\"fdf55a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then, follow the instructions of the\u00a0<a style=\"font-weight: 400; font-family: &#039;PT Sans Narrow&#039;, sans-serif; background-color: #ffffff;\" href=\"https:\/\/github.com\/flutter\/flutter\/wiki\/Setting-up-the-Engine-development-environment\" target=\"_blank\" rel=\"noopener\">setup development environment page of Flutter<\/a>.<br \/>You have to follow Step 1 up to Step 6.<i> Ignore Step 7, 8, 9. <\/i>The last step you should do is to add a remote for the upstream repository.<\/p><h3>Compile the Engine<\/h3><div>Following along the <a href=\"https:\/\/github.com\/flutter\/flutter\/wiki\/Compiling-the-engine#compiling-for-macos-or-linux\" target=\"_blank\" rel=\"noopener\">instructions<\/a> for desktop Linux we will now compile the engine.<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e165689 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"e165689\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>cd engine\r\ncd src\r\n\r\n.\/flutter\/tools\/gn \\    \r\n    --target-toolchain \/PATH\/TO\/YOUR\/SDK \\\r\n    --target-sysroot \/PATH\/TO\/YOUR\/SDK\/sysroot \\\r\n    --target-triple arm-linux-gnueabihf \\\r\n    --arm-float-abi hard \\\r\n    --linux-cpu arm \\\r\n    --runtime-mode debug \\\r\n    --embedder-for-target \\\r\n    --no-lto \\              \r\n    --target-os linux\r\n\r\nninja -C out\/linux_debug_arm <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07368fe elementor-widget elementor-widget-text-editor\" data-id=\"07368fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you run into issue like missing <code>*.o<\/code> files during linking you do experience an issue most likely caused by libgcc not being installed correctly within the sysroot of the sdk.<\/p><p>You may want to make a coffee (or two) while it compiles&#8230;<\/p><p>Once you are done and everything is built, create a good and save location on your disk and copy<\/p><ul><li><code>libflutter_engine.so<\/code>,<\/li><li><code>icudtl.dat<\/code>\u00a0and<\/li><li><code>flutter_embedder.h<\/code><\/li><\/ul><p>from <code>out\/linux_debug_arm<\/code> to your target disk.<\/p><p>You can check with <code>file libflutter_engine.so<\/code> that you have created an ARM ELF file.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-38f2b59 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"38f2b59\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cfba79f\" data-id=\"cfba79f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-92d8cd0 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"92d8cd0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-centralize\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d343844 elementor-widget elementor-widget-text-editor\" data-id=\"d343844\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>The Embedder<\/h2><div><p>The application which provides the flutter engine an opengl context and access to system resources is called &#8220;the embedder&#8221;.\u00a0\u00a0<\/p><\/div><div>A very light-weight starting point can be found\u00a0<a href=\"https:\/\/github.com\/andyjjones28\/flutter-pi\" target=\"_blank\" rel=\"noopener\">here<\/a>. The instructions are made for a raspberry pi + compiling on the pi. I will point out what we need to cross-compile in our more general case.<\/div><div>\u00a0<\/div><p>Make sure the compiler and linker can find <code>libflutter_engine.so<\/code> and <code>flutter_embedded.h<\/code>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ded644 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"2ded644\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>git clone https:\/\/github.com\/andyjjones28\/flutter-pi.git\r\ncd flutter-pi\r\nmkdir out\r\n\r\n\/PATH\/TO\/YOUR\/SDK\/bin\/arm-linux-gnueabihf-cc -D_GNU_SOURCE \\\r\n-lEGL \\\r\n-ldrm \\\r\n-lgbm \\\r\n-lGLESv2 \\\r\n-lrt \\\r\n-lflutter_engine \\\r\n-lpthread \\\r\n-ldl \\\r\n-I.\/include \\\r\n-I\/usr\/include \\\r\n-I\/usr\/include\/libdrm \\\r\n.\/src\/flutter-pi.c \\\r\n.\/src\/platformchannel.c \\\r\n.\/src\/pluginregistry.c \\\r\n.\/src\/plugins\/services-plugin.c \\\r\n-o out\/flutter-pi  <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-411782b elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"411782b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1215cf0\" data-id=\"1215cf0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15eea70 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"15eea70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-egg-fry\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5f463e elementor-widget elementor-widget-text-editor\" data-id=\"a5f463e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>How to run your Flutter App<\/h2><p>Now that you have built it, you sure want to verify its working, right?<\/p><h3>Prepare your device<\/h3><p>First you have to copy the <code>libflutter_engine.so<\/code> and the <code>icudtl.dat<\/code> along with the <code>flutter-pi<\/code> to your target hardware.<\/p><h3>Prepare the app code<\/h3><p>For some samples, take a look <a href=\"https:\/\/github.com\/flutter\/samples\" target=\"_blank\" rel=\"noopener\">here<\/a> in the sample repository. Please note that many of them require deeper support, support that the sample embedder does not provide to them. You may also (depending on your system) experience some ssl certificate issues on some demos.<\/p><p>What should work with the embedder is the\u00a0<a href=\"https:\/\/github.com\/flutter\/samples\/tree\/master\/web\/particle_background\" target=\"_blank\" rel=\"noopener\">nice background particle demo.<\/a>\u00a0<\/p><p>Once you got the sources you will have to patch the <code>main function in .\/lib\/main.dart<\/code>. By adding\u00a0<code>debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;<\/code><br \/>before the <code>runApp<\/code> call.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d8681a elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"6d8681a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-clike'>\/\/ ADD THIS IMPORT\r\nimport &#039;package:flutter\/foundation.dart&#039;;\r\n\r\n\/\/ ...... \r\n\r\nvoid main() {\r\n  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;\r\n  runApp(MyApp());\r\n}\r\n\r\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-036df16 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"036df16\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8ae64c5\" data-id=\"8ae64c5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e737dad elementor-widget elementor-widget-text-editor\" data-id=\"e737dad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Bundle the app<\/h3><p>For this step you have to <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\" target=\"_blank\" rel=\"noopener\">install<\/a> flutter on your host system (if you have not done this already). It&#8217;s a really awesome experience, don&#8217;t worry.\u00a0<\/p><p>If you have a flutter dev setup on your host. Go to your sample directory and call:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62a0020 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"62a0020\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'># cd flutter-example\r\n\r\nflutter build bundle <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-326a29a elementor-widget elementor-widget-text-editor\" data-id=\"326a29a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And now copy it to your target, next to your embedder.<\/p><h3>Run the app<\/h3><p>The time has come to flutter on your target. For more detailed instructions just take a look in the\u00a0<a href=\"https:\/\/github.com\/andyjjones28\/flutter-pi#running\" target=\"_blank\" rel=\"noopener\">README\u00a0<\/a>of the runner repo. You can also pass\u00a0<a href=\"https:\/\/github.com\/flutter\/engine\/blob\/master\/shell\/common\/switches.h\" target=\"_blank\" rel=\"noopener\">flutter engine flags\u00a0<\/a>along by adding them after the bundle directory.<\/p><p><code>\/path\/to\/assets\/bundle\/directory<\/code> is the path of the flutter asset bundle directory (i.e. the directory containing the kernel_blob.bin) of the flutter app you&#8217;re trying to run.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c8287b elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"8c8287b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-bash'>.\/flutter-pi -t \/dev\/input0 \/path\/to\/assets\/bundle\/directory  <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdde708 elementor-widget elementor-widget-text-editor\" data-id=\"bdde708\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And now you should see your Flutter App on your target device display, along with many additional information on your terminal.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edb318a elementor-widget elementor-widget-heading\" data-id=\"edb318a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Live capture<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a88fe68 fluttervideodiv elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"a88fe68\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;background_motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;background_motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:5.1,&quot;sizes&quot;:[]},&quot;background_motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:13,&quot;end&quot;:82}},&quot;shape_divider_top&quot;:&quot;mountains&quot;,&quot;shape_divider_bottom&quot;:&quot;mountains&quot;,&quot;background_motion_fx_devices&quot;:[&quot;widescreen&quot;,&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" opacity=\"0.33\" d=\"M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z\"\/>\n\t<path class=\"elementor-shape-fill\" opacity=\"0.66\" d=\"M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" opacity=\"0.33\" d=\"M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z\"\/>\n\t<path class=\"elementor-shape-fill\" opacity=\"0.66\" d=\"M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-00c6788 videoContainerFlutter\" data-id=\"00c6788\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3091f5d elementor-widget elementor-widget-heading\" data-id=\"3091f5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6066038 elementor-widget elementor-widget-video\" data-id=\"6066038\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;widescreen&quot;,&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2020\/06\/flutter_auf_embedded.mov\" autoplay=\"\" loop=\"\" controls=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1470d9a elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no\" data-id=\"1470d9a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c555e2f\" data-id=\"c555e2f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9d56ef1 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"9d56ef1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"hm hm-infinity\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95f84e3 elementor-widget elementor-widget-text-editor\" data-id=\"95f84e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Conclusion<\/h2><p>After testing and experimenting with Flutter on the iMX.6, I was really surprised by the performance you get with an unoptimized embedder within a debug build. I did not spent much time on profiling, so I can not provide you hard numbers, but it really feels like a very good start.\u00a0<\/p><p>On the negative side, creating and maintaining an embedder with the required features is hard groundwork. This is definitely not something for juniors, since you have to get down into some dirt where even experienced developers will need to take a sip of coffee first.<\/p><p>On the plus side, you will get a very light-weight, fast and flexible environment to run your app in. This app can run on iOS, Android, Desktop, the Web (Javascript!) and of course on your device.\u00a0<\/p><p>Together with the ability to use the SKIA backend and render in software Flutter should be able to run on very low end devices and render even there some basic HMI&#8217;s.\u00a0<\/p><p>Flutter is definitely an option to take into consideration if you plan to build a multi platform HMI with a relative small dependency footprint and a very friendly <a href=\"https:\/\/github.com\/flutter\/flutter\/blob\/master\/LICENSE\" target=\"_blank\" rel=\"noopener\">BSD-3 open source license<\/a>.\u00a0<\/p><p>I hope you enjoyed this adventure into the world of Flutter like I did. If you have any suggestion or question just drop a comment down below.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ef6a29 elementor-widget elementor-widget-text-editor\" data-id=\"5ef6a29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Further reads<\/h4><p>There are some great resources found in the internet that helped me to put down this article.\u00a0<\/p><ul><li><a href=\"https:\/\/medium.com\/flutter\/flutter-on-raspberry-pi-mostly-from-scratch-2824c5e7dcb1\" target=\"_blank\" rel=\"noopener\">Flutter on RaspberryPi<\/a><\/li><li><a href=\"https:\/\/github.com\/gustavsl\/flutter-tdx#running-your-app-with-flutter-tdx\" target=\"_blank\" rel=\"noopener\">Flutter on Toradex<\/a><\/li><li><a href=\"https:\/\/github.com\/andyjjones28\/flutter-pi\" target=\"_blank\" rel=\"noopener\">Flutter Pi<\/a><\/li><\/ul><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this blog we will cross compile Flutter for a generic ARMv7 Embedded Linux target. We will prepare the sdk, compile flutter and in the end run some demos.<\/p>","protected":false},"author":1,"featured_media":3980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1,2],"tags":[224,223],"class_list":["post-3703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-blog","tag-embedded","tag-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/3703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/comments?post=3703"}],"version-history":[{"count":59,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/3703\/revisions"}],"predecessor-version":[{"id":11705,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/3703\/revisions\/11705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media\/3980"}],"wp:attachment":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media?parent=3703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/categories?post=3703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/tags?post=3703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}