From Zero to App with Flutter

So, Google has a new alternative to building native apps on iOS and Android. Rather than talk about the wisdom behind this, the pros/cons, or try to convince you this is not a bad thing, I though it would be fun to kick the tires with a sample app.

Let’s Get Started

Head on over to flutter.io and download flutter.  I’ll be doing this on a Windows PC but steps on other platforms should be similar. Note there are some prerequisites that you should take care of first:

  • Make sure you have a working Android Studio or xCode installation. Flutter apps need a working emulator or device – Flutter does not run on the web! This means a working setup with either Android or xCode is needed before you go any further here. Since I am doing this on a Windows PC, I’ll be using Android Studio.
  • Make sure you have Git installed.

Download Flutter

We are using Git to clone the Flutter repo which in the end will give us a working Flutter SDK.  Execute the following command from the command prompt.  Note that this will put Flutter in a folder under your current working directory called flutter.

git clone -b beta https://github.com/flutter/flutter.git

Configuring your Environment

Next, we have to tell our OS where flutter lives.  On Windows this is done by updating the PATH environment variable.  On macOS this is done by editing your .bash_profile (details here).  The way I choose to do this is to right-click on ‘Computer’ in Windows Explorer and choose Properties. This brings up the System Window and from here you click on the ‘Advanced system settings’ option (left side) and then on the ‘Environment Variables’ button.

Under the System variables, add the full path to where the flutter\bin folder lives on your PC.  This is the location you cloned the flutter repo to in step 2. For example, I added this to my Path System Variable:

;F:\dev\tools\flutter\bin

Configuring Flutter

Open a NEW command prompt window.  From here, enter the following command.

flutter doctor

This essentially does a health check for flutter and does its best to ensure your environment is ready to go. In my experience this took about 2 minutes to complete. According to the flutter team this is because the first time you use it, it will download any missing dependencies. If there are any issues reported by flutter, you’ll see them listed in the command window.  In my case flutter reported my Visual Studio Code needed updating and I did not have a device hooked up to my PC:

Lets take care of that!  Updating VS Code is easy, simply go to Help > Check for Updates & restart.   Another check of flutter doctor and voila!  Looking better…

Next up we need to get an Android device or emulator up and running.  I have my android Samsung sitting right here so I plugged it in and reran flutter doctor and it seems the doctor gave us a clean bill of health! 

Trying an Emulator…

So, what if we wanted to use an emulator instead?  Let’s give that a try. Fire up Android Studio and launch the AVD manager. Choose a virtual device (you have one setup don’t you?) and run it. Once your emulator is up, lets try a different way of seeing if flutter can connect to it. Head back over to your command prompt and enter:

flutter devices

You should see your device listed. For example:

Integrating into VS Code

We could stop here and build our flutter app, but instead I want to integrate flutter with my favorite editor – VS Code.  Open VS Code and install the Dart extension (Flutter uses the Dart language).  Full steps here but here is the short version:

  • Within VS Code, open View > Command Pallete
  • Type ‘install’ and choose ‘Extensions: Install Extensions’
  • Type Dart and install the Dart Code extension:
  • Now that we have VS Code ready, lets turn our attention to building the app.

Building the app

From within VS Code, open the command palette (CTRL+SHIFT+P)
Enter ‘flutter’ and choose ‘Flutter: New Project’
You’ll be prompted for a project name.  Enter whatever you like.  I used flutter_app_1 (note that you must use underscores to separate names and you must use all lower case).
Save your project to a location of your choice and click Ok.  If all goes well, within a minute or so you should see something like this in VS Code: 
Press F5 to run the app.  This will take a bit but you can monitor the progress in the VS Code Output window (I found the initial startup to be much faster on an emulator as opposed to a real device).  If all is well you will see a screen just like this: 

Conclusion

This is beta software so we can expect a few bumps.  But overall I was pleased with the outcome.

I plan on doing some additional flutter articles in the near future in order to see just how far we can push this platform.  Comment below if you have specific interests!