Introduction

Ever wanted to control or configure or monitor hardware using a mobile phone, using (say) USB or Bluetooth? I have, and usually I code it in JavaScript, so that the software can run from any platform with a web browser. Recently I decided to try something called Flutter, which is a set of tools for creating applications that can then be compiled for a target platform. The programming language that is used with Flutter is called Dart; it looks a bit like Python, or any typical programming language. I'm a beginner at it, and this blog post documents my progress in case anyone wants to try to give it a shot too.

With Flutter, if you want to create an app, the procedure is to write code in Dart, including fancy widgets and libraries provided with Flutter, process your code using the Flutter tools from the command line, which will compile using the normal target build tools. In the case of Android phones for instance, you could use Android Studio for the final compilation.

This blog post discusses how I installed Flutter, and built a default demo app (the demo doesn't do much, it displays a single button and text that updates when the button is clicked).

For this blog post, I used Android, but one could make apps to run on iPhones, and also desktop apps too. 

Software Installation

Create a folder for Android development. I created a folder called:

C:\DEV\vhd_mounts\android

Android Studio and Flutter Setup

I won’t be using Android Studio as a code editor, but nevertheless it is easier if it is installed for access to the tools and software development kit (SDK). I Installed Android Studio from the Android developer website,

In my case, the Android Studio path was:

C:\DEV\vhd_mounts\android\Android Studio

Start it Android Studio, and install the Android SDK as prompted. Install it to somewhere like:

C:\DEV\vhd_mounts\android\Sdk

Run Android Studio, and from More Actions, select SDK Manager.

Go to SDK Tools, and enable command line tools as shown below. Click Apply, and wait a short while for it to install.

Next, go to Plugins, and install the Flutter plugin. Note that you still need to install Flutter itself; that will come next.

Close Android Studio, and then download Flutter. It’s a zip file, extract it somewhere (I extracted to my android folder I created earlier), and then append the bin folder path to your PATH environment variable; I added it to the user variable. In my case, the path was:

C:\DEV\vhd_mounts\android\flutter\bin

Also, while you’re at it, add the Android Studio SDK platform-tools folder to the PATH as well; in my case:

C:\DEV\vhd_mounts\android\Sdk\platform-tools

Phone Setup

Your mobile phone needs to be in a USB Developer mode (it is also possible to use WiFi, but for now I’ll only cover USB).

The precise process is manufacturer dependent, and in the case of Samsung, there are quite a few steps. I had to seek out Developer Options, turn that on, then scroll down to the Debugging section there and turn on USB Debugging. Then, I had to locate the Auto Blocker configuration in the phone, and disable that. When the phone is eventually connected to the PC (don’t do that yet if possible), then you’ll have to look for a notification which indicates that USB is “Connected for charging only”, tap on that, and change that to “Use USB for Transferring files / Android Auto”.

To make matters more complicated, the standard Microsoft driver (called MTP) cannot be used with Samsung phones, so one has to download and install a driver from the Samsung website before connecting the phone. 

If you have previously already plugged the phone into the PC, then the old driver needs deleting (unplug the phone, then in Device Manager, select View->Show Hidden Devices and then locate the phone in the list, and delete it, and then definitely reboot the PC, otherwise the Microsoft driver gets reinstalled.

For Samsung phone users, you need to get the view in Windows Device Manager to the state as shown in the screenshot below. As Windows and Android evolves, the information above may not precisely match what needs to be done in future.

Once you see the above, as another sanity check, you could go to Powershell and type the following, and see if your phone gets listed as a recognized Android device:

adb.exe devices

Creating a Project

Create a folder for android project. My path was:

C:\DEV\projects\android_studio_projects

Open up a PowerShell, go to that folder, and type (all lower-case!):

flutter create <your_project_name>

You’ll see that a load of files got created:

Using PowerShell, go into the project folder (test2 in my example), and then type the following to run some sanity checks:

flutter doctor

In my case, you can see there are some warnings and errors. The Chrome and Visual Studio errors are not relevant for mobile development, but you may wish to correct them to experiment with desktop Flutter apps.

I followed the warning text, and ran:

flutter doctor --android-licenses

Running the App

You can type the following in a PowerShell window, in your project folder:

flutter run

Note that it will take some time to execute the first time! Long enough to make tea/coffee.

There’ll be a ton of scrolling text, but eventually, on the mobile phone, an example flutter app appears!

In PowerShell, press ‘h’ to see a list of commands:

Project Folder Explained

The project folder contains quite a lot, but in practise, the most important things to know are that the project source is in the lib folder, and then there are a load of platform-specific folders (such as android, ios, linux, macos and so on) that may occasionally need to be touched (to edit the project name, permissions, and so on).

The pubspec.yaml file is important, this is where any packages are entered as dependencies (such as code libraries) that the project may require.

Note that if you add dependencies in pubspec.yaml, then you’ll need to type the following to install them:

flutter pub get

Creating an App Icon

Create an assets folder in the project folder.

In pubspec.yaml, under dev_dependencies, add this entry:

flutter_launcher_icons: ^0.14.4

At the end of the pubspec.yaml file, place the following:

flutter_launcher_icons:
android: "ic_launcher"
ios: true
image_path: "assets/app_icon.png"

Place a 1024x1024 PNG file in the assets folder, then in PowerShell, type:

flutter pub get
dart run flutter_launcher_icons

Now when you run the app (in the same way as mentioned in Running the App, i.e. by typing flutter run) you'll see the icon has changed.

Summary

The Flutter toolkit allows one to create apps that can potentially be compiled and built to run on many different platforms, including mobile devices. In this blog post, the steps to install Flutter were discussed, and the mobile phone was configured for uploading apps via USB, and a demo app was run. Next steps could be to examine the example project source code in the lib folder, and to perhaps try modifying it.

Eventually, I'd like to be able to control my microcontroller projects using mobile apps developed with Flutter (currently I do it with HTML/JavaScript); that will be the subject for another blog.

If you've ever used Flutter/Dart, or are planning to, it would be great to hear about how it went for you, and any tips or reading suggestions would be gratefully received.

Thanks for reading this blog!