<?xml-stylesheet type="text/xsl" href="https://community.element14.com/cfs-file/__key/system/syndication/rss.xsl" media="screen"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:wfw="http://wellformedweb.org/CommentAPI/"><channel><title>Creating a Mobile App with Flutter: First Steps!</title><link>/technologies/embedded/b/blog/posts/creating-a-mobile-app-with-flutter-first-steps</link><description>Table of Contents

 Introduction 
 Software Installation 

 Android Studio and Flutter Setup 


 Phone Setup 
 Creating a Project 
 Running the App 
 Project Folder Explained 
 Demo Code Explained 
 Creating an App Icon 
 Summary 



Introduction
Ever</description><dc:language>en-US</dc:language><generator>Telligent Community 12</generator><item><title>RE: Creating a Mobile App with Flutter: First Steps!</title><link>https://community.element14.com/technologies/embedded/b/blog/posts/creating-a-mobile-app-with-flutter-first-steps</link><pubDate>Sat, 15 Aug 2026 02:31:25 GMT</pubDate><guid isPermaLink="false">93d5dcb4-84c2-446f-b2cb-99731719e767:9bbe6486-b663-45bf-873f-08a688a515d7</guid><dc:creator>shabaz</dc:creator><slash:comments>0</slash:comments><description>&lt;p&gt;I let AI give BLE a shot, and it seems to work nicely (I&amp;nbsp;used ChatGPT).&lt;/p&gt;
&lt;p&gt;For this app, each &amp;quot;screen&amp;quot; has its own .dart file, so, for instance, the screen that allows selection of USB or Bluetooth, happens to be called transport_selection_screen.dart, and, in a similar vein as the default demo app code description in the blog, that dart file contains two classes, one which inherits (extends) &lt;strong&gt;StatefulWidget&lt;/strong&gt;, and the other which inherits &lt;strong&gt;State&lt;/strong&gt;.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;There&amp;#39;s also something called a &lt;strong&gt;Route&lt;/strong&gt;, which takes a screen class as a parameter. It&amp;#39;s explained further below.&lt;/p&gt;
&lt;p&gt;When (say) a user taps on the Bluetooth button on that first screen, a registered callback function executes (this is again just like in the blog as part of the demo app explanation), and that function contains&amp;nbsp;&lt;strong&gt;Navigator.of(context).push&lt;/strong&gt;&lt;span&gt;&lt;strong&gt;(&lt;/strong&gt;&amp;nbsp;which searches upward in the Widget tree for the nearest &lt;strong&gt;Navigator&lt;/strong&gt; object. That Navigator object maintains a &amp;quot;stack&amp;quot; of screens (actually a stack of Routes), and inserts (pushes) the next Route to display, which happens to be in a file called ble_device_list_screen.dart in my case. The reason that Routes are pushed and not just the StatefulWidget (or StatelessWidget) inheriting class, is because the Route can allow things like transitions, transparency, and so on to occur as part of the app.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " height="659" src="/resized-image/__size/1152x1318/__key/commentfiles/f7d226abd59f475c9d224a79e3f0ec07-9bbe6486-b663-45bf-873f-08a688a515d7/app_2D00_screens.png" width="576" /&gt;&lt;/p&gt;
&lt;p&gt;I decided to&amp;nbsp;use a custom underlying protocol (probably not a great idea! but I&amp;#39;m running with it for now until it inevitably comes back to bite me) for the data transfer between the app and the microcontroller. I&amp;#39;m using a Pi Pico W for now, but it shouldn&amp;#39;t be hard to replicate to ESP32 for instance, and use the same app.&lt;/p&gt;
&lt;p&gt;The custom protocol sends a stream of ASCII, with each command beginning with &amp;quot;$&amp;quot; and ending with &amp;#39;\n&amp;#39;. In BLE terms,&amp;nbsp;the app writes to a particular characteristic, and expect a response to&amp;nbsp;arrive as notifications for another characteristic. The reason for this, is that it is easy to swap out BLE for USB, and instead of using a command characteristic and a response characteristic, that gets replaced with serial writes and received bytes from incoming events. The reason for sticking with ASCII and &amp;#39;$&amp;#39; and &amp;#39;\n&amp;#39; was so that if the app isn&amp;#39;t usable, one can always just use a serial console, and type the commands and hit return for them to execute. If the &amp;#39;$&amp;#39; is not typed first, then the microcontroller can echo back characters on the USB serial.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;It can take a very long time for a clean build to execute. I&amp;#39;m using a fairly recent but typical consumer-grade laptop, with a reasonable amount of RAM. I think&amp;nbsp;for developing such apps regularly, one&amp;nbsp;would benefit a lot from a more powerful PC, perhaps a desktop one with a really good processor.&lt;/p&gt;&lt;img src="https://community.element14.com/aggbug?PostID=30045&amp;AppID=7&amp;AppType=Weblog&amp;ContentType=0" width="1" height="1"&gt;</description></item><item><title>RE: Creating a Mobile App with Flutter: First Steps!</title><link>https://community.element14.com/technologies/embedded/b/blog/posts/creating-a-mobile-app-with-flutter-first-steps</link><pubDate>Fri, 14 Aug 2026 12:53:16 GMT</pubDate><guid isPermaLink="false">93d5dcb4-84c2-446f-b2cb-99731719e767:9bbe6486-b663-45bf-873f-08a688a515d7</guid><dc:creator>BigG</dc:creator><slash:comments>1</slash:comments><description>&lt;p&gt;I haven&amp;#39;t done mobile/cellular app development in years, so this is nice reminder. We forget that our phones are jam packed full of sensors, e.g. accelerometers, proximity, light sensors etc. This, in my opinion, is where Flutter hits the sweet spot compared to the simpler but harder to scale low-code MIT App Inventor.&lt;/p&gt;
&lt;p&gt;But both MIT App Inventor and Flutter have been around for a good few years now. I just did a quick search online and surprise surprise... There is a new kid on the block. May be worth a look at this too:&amp;nbsp;&lt;a id="" href="https://capacitorjs.com/" rel="noopener noreferrer nofollow" target="_blank" data-e14adj="t"&gt;https://capacitorjs.com/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Then there is also Kotlin. I think this is an alternative to Android, but I may be mistaken.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://kotlinlang.org/compose-multiplatform/" rel="noopener noreferrer nofollow" target="_blank" data-e14adj="t"&gt;kotlinlang.org/.../&lt;/a&gt;&lt;/p&gt;&lt;img src="https://community.element14.com/aggbug?PostID=30045&amp;AppID=7&amp;AppType=Weblog&amp;ContentType=0" width="1" height="1"&gt;</description></item><item><title>RE: Creating a Mobile App with Flutter: First Steps!</title><link>https://community.element14.com/technologies/embedded/b/blog/posts/creating-a-mobile-app-with-flutter-first-steps</link><pubDate>Fri, 14 Aug 2026 03:48:35 GMT</pubDate><guid isPermaLink="false">93d5dcb4-84c2-446f-b2cb-99731719e767:9bbe6486-b663-45bf-873f-08a688a515d7</guid><dc:creator>embeddedguy</dc:creator><slash:comments>1</slash:comments><description>&lt;p&gt;I would just say All the best.&lt;/p&gt;
&lt;p&gt;I have worked with Android Studio and Flutter as well for creating simple BLE application. But coming from embedded C/C++ background it is hard for me to understand other programming language and the environments. Moreover, Android studio is very large and makes the PC slow.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;The BLE API was also hard to work with. Finally, I have gave up.!&lt;/p&gt;&lt;img src="https://community.element14.com/aggbug?PostID=30045&amp;AppID=7&amp;AppType=Weblog&amp;ContentType=0" width="1" height="1"&gt;</description></item><item><title>RE: Creating a Mobile App with Flutter: First Steps!</title><link>https://community.element14.com/technologies/embedded/b/blog/posts/creating-a-mobile-app-with-flutter-first-steps</link><pubDate>Thu, 13 Aug 2026 20:05:12 GMT</pubDate><guid isPermaLink="false">93d5dcb4-84c2-446f-b2cb-99731719e767:9bbe6486-b663-45bf-873f-08a688a515d7</guid><dc:creator>DAB</dc:creator><slash:comments>0</slash:comments><description>&lt;p&gt;Very interesting tool.&lt;/p&gt;&lt;img src="https://community.element14.com/aggbug?PostID=30045&amp;AppID=7&amp;AppType=Weblog&amp;ContentType=0" width="1" height="1"&gt;</description></item></channel></rss>