A Gentle Introduction to Flutter 3

A Gentle Introduction to Flutter 3

Compile your flutter app for Android, then run it on an Android device.

2023-03-15

We’ve seen in parts 1 and 2 of this series how to make a simple Flutter app run on a web browser and on an iOS device. Having in mind that Android is the world's most-used operating system, it’s only natural that we learn how to make our app run on Android.

Before getting started

To complete this part, it is recommended that you complete the first part of our Gentle Introduction to Flutter. The second part is about running flutter on iOS, so if your primary interest is Android, you can skip that part.

We are going to start where we left off. So far, we had a welcome screen that outputs some text to the console when you tap on the Contact Developer Button. You can check the first part of the tutorial here and get the complete Dart code here.

Downloading the right Flutter for your machine

You need to download and install the correct file depending if you use Windows, macOS, or Linux. For this tutorial, I am going to use macOS. Since it is based on Unix, the instructions for Linux are very similar. In the following link, you can find specific flutter versions for different operating systems:

https://docs.flutter.dev/get-started/install

Once it finishes downloading, extract the components of the zip file to a folder where our local installation will live. I called mine flutter339.

my flutter folder

Configure your path for Flutter

We have flutter now, but we need to add it to the terminal Path so we can use it as a command on different folders. One way to do that is the following:

Inside your flutter folder go to the bin subfolder, and open a new terminal at its location.

open terminal at folder

Inside the newly opened terminal window use the pwd command to get the working path and copy that value.

setting flutter path

Now, using finder go to the root path for your user, and check if there’s a .zshrc file (beware it’s a hidden file).

Using your favorite code editor, open (or create it) and put the line you got from the terminal at the end, for example, my .zshrc file ended up looking like this:

adding flutter to path

Note: For Linux, you probably need to check for a different file like $HOME/.bashrc You can find detailed instructions on the next link:

https://docs.flutter.dev/get-started/install/linux#update-your-path

Similarly, the process of updating the path is a little different for Windows. Check the following link for specific instructions:

https://docs.flutter.dev/get-started/install/windows

Create a Flutter Project

Reopen a terminal window. Go to a folder where your amazing first flutter project will live and run the following command:


flutter create presentation\_app

If you check the same folder with your file manager, you will see a newly created folder with the name you specified.

presentation app folder

Inside that folder open lib/main.dart with your favorite code editor.

main.dart file

This file is the entry point for your Flutter app. Delete all of it and paste the code from the first part of the tutorial.

Running a Flutter project on a Virtual Device

For this we will need Android Studio, a complete and free IDE you can get from:

https://developer.android.com/studio

Installing it is easy, you just need to choose standard installation and let the wizard guide you through the rest of the process.

android studio install 1

Also, accept terms and allow it to install Android SDK:

android studio install 2

Once Android Studio has finished installing, go to File > Open and open your flutter project. The first time you do this, it may suggest installing the Flutter plugin:

configure android sdk

Flutter comes bundled with a nice tool called flutter doctor for checking if everything is configured correctly. Execute the following command in the root of your flutter project:


flutter doctor

You can do this without leaving Android Studio using the bundled terminal:

android studio builtin terminal

In the screenshot, everything looks fine, but it might not be your case. The first time I executed flutter doctor it didn’t find the cmdline-tools required for Android toolchain.

One easy way to install this cmdline-tools is using Android Studio. Go to Settings > Appearance & Behavior > Systems Settings > Android SDK > SDK Tools Tab and select it:

configure android sdk

Another problem you might diagnose when executing flutter doctor is a java misconfiguration, for example, I got this:

flutter doctor help

This output can be confusing. It asks us to go to java.com to download Java, but it also says it is Unable to find the bundled Java within Android Studio.

It turns out, recently Android Studio changed the name and version of its bundled java, but this can be easily bypassed by creating a symbolic link. Run the following command on your terminal:


cd \"/Applications/Android Studio.app/Contents\"

and then


ln -s jbr jre

This problem is not exclusive to mac, if you run into it using Linux, this article might be helpful: https://medium.com/@brianmutinda49/unable-to-find-bundled-java-version-flutter-doctor-ubuntu-fix-a754240bdaab

After you set everything up, and when flutter doctor shows no errors, be sure to restart Android Studio before following to the next step.

When it reopens, check if the Device Manager panel is visible. If not, you can make it visible by clicking on the following icon:

open device manager

Next, click on: “Create a Device”. There, you can select a device definition that matches some of the most popular Android devices. After that, select and download a System Image for your emulated device:

choose system image

This can take a while because system images are large. After downloading and installing, launch your new ADV (Android Virtual Device).

The emulator will launch. If it’s too small, you can undock it and resize it:

android device simulation

With the emulator running, go to the terminal and in the root folder of your flutter project run:


flutter run

app running in emulator

There you go! Your app running on an Android emulator!

Note that instead of executing flutter run you can also execute (or debug) your app with the buttons of the Run toolbar of Android Studio.

android studio toolbar

Cool, right? Now we are ready to take the ultimate challenge of this “Gentle introduction to flutter”, running it on a physical android device, but before that let's check one of the coolest features of Flutter: “Hot reload”.

It refers to the ability to see your changes play on the emulator almost instantly without having to recompile the whole app, this is something that can’t be done even when doing native development most of the time.

Change one of the texts of your Presentation app, for example, the name of the person, and check how after a few seconds it updates automatically on the emulator.

app running in emulator

Running a Flutter project on a Physical Device

Android is not as strict about certificates and code signing as iOS, but you need to make sure to enable Developer options and USB debugging on your testing device. Detailed instructions are available in the Android documentation.

After you enable USB debugging, connect your device to your computer. A warning might appear on the device asking if you allow USB debugging. Tap “Yes” or “Allow”. In my case, I used a kindle fire, this is an interesting android device to test with, because it does not use Google’s services like Play Store, instead, you install the apps using Amazon’s marketplace.

After connecting your device, run the command flutter devices on the root folder of your flutter project and check if your physical device appears.

flutter devices output

In this case, KFQWI refers to a physical Kindle Fire. If it appears there, then let the show beings by running:


flutter run

The first time you run this command, it will take some minutes, if everything goes well, soon you will have your beloved “Presentation App” running on a physical Android Device.

app running on kindle fire

We have executed it on the web, on an iPhone, and on an Android tablet. This is serious cross-platform development! Does anyone have a smart fridge to test?

I hope this “Gentle Introduction to Flutter” series encouraged you to explore more about this fascinating framework that allows you to code natively compiled, multi-platform applications from a single codebase.