Getting started with Flutter Development — Setup
By: Andy Ward
Tags: Software Development, Flutter, Mobile App Development, Dart, Cross Platform

Step by step setup process

*Note: This article will focus on setting up and running the Flutter demo project using VS Code on Windows using an Android Emulator. No Flutter code will be written in Android Studio, Xcode nor will an iOS Emulator be used (as i don’t have a Mac). This being said, I would assume that the setup on a Mac would be very similar to the one provided here.*

Navigate to: https://flutter.dev/docs/get-started/install and select the OS that your computer is running.

You can follow the instructions for your respective OS. I’m installing it on Windows, so I will create a step by step process of how I’ve installed it:

Downloaded the Flutter SDK via the flutter.dev link above

Extracted it to (C:/src), creating a new folder called ‘src’

Navigated to “Edit the System Environment Variables” menu by typing “env” into the start menu search box

On the “System Properties” menu, clicked on the “Environment Variables” button

Selected the “Path” User variable (if you haven’t got a “Path” User variable, you can create one… although it should be there already) and click on “Edit”

The “Edit Environment Variable” window should appear. Click on “New” and add the path where you extracted the Flutter download from (e.g. C:/src/flutter/bin) including the directory to the “bin” folder

To check the System now recognises Flutter, navigate to the Command Prompt and type in “flutter”… this should show a list of Flutter commands

If all is good with your Flutter installation, in the Command Prompt, type “flutter doctor”

“flutter doctor” checks for the required dependencies to create Flutter apps

Flutter Doctor: Checklist

The checklist should include information about:

Flutter, Android toolchain, Android Studio, VS Code and Connected Device

Some warning or error messages may appear. If so, navigate through them and fix them accordingly

Warning/Error messages may include: [Android Studio] Flutter plugin not installed, Dart plugin not installed, [VS Code] Flutter extension not installed…

In the case of Android Studio errors , it is likely that you will need to go to Android Studio (assuming you have it installed), “SDK Manager” → “Plugins”, search the plugins marketplace and install Flutter and Dart

, it is likely that you will need to go to Android Studio (assuming you have it installed), “SDK Manager” → “Plugins”, search the plugins marketplace and install Flutter and Dart In the case of Visual Studio Code errors , it is likely that you will need to go to VS Code (assuming you have it installed), go to the “Extensions” icon on the left, search for “Flutter” and “Dart” and install them both. Dart installed automatically when I installed the Flutter extension.

, it is likely that you will need to go to VS Code (assuming you have it installed), go to the “Extensions” icon on the left, search for “Flutter” and “Dart” and install them both. Dart installed automatically when I installed the Flutter extension. Don’t worry about the “Connected Device” warning , you can either setup an emulator in a minute, or use an actual device.

, you can either setup an emulator in a minute, or use an actual device. Rerun “flutter doctor” to check if the issues have been resolved

Hopefully, this is what is shown in your Command Prompt

If your Command Prompt looks like the image above, then…

(Hopefully you didn’t get lost with the then… on the last part and are reading this).

VS Code

Create a new folder for your Flutter projects to be stored in.

Go to VS Code, click on “File” → “Open Folder” and navigate to the folder you just created and click on “Select Folder”

You should see the VS Code UI update and the name of the folder should appear on the left pane in VS Code

I created a folder called “Flutter Projects”

Now, click on “Terminal” → “New Terminal” to open a new terminal window.

You should see this appear at the lower-centre part of VS Code, with the directory to where the folder is located listed.

This is the cooler part. To create your flutter app, type the command: flutter create {project_name}

I’ve called my project “firstFlutterApp”

The project should now be created and shown as above (good stuff!)

The place to write your code is in main.dart, which is located under “lib”.

Dart is the programming language used to write Flutter apps. If you are used to developing in a language that uses the Object Oriented Programming Paradigm, you should be fine.

Running your Flutter code

Now is the part where you have 2 options:

Run the Flutter demo app using your actual Android/iOS device* Run the Flutter demo app using an Android/iOS emulator

*This article will cover the 2nd option, running the Flutter demo app using an Android emulator.

*As I’m using Windows and don’t have access to a Mac, I won’t be able to show using the iOS emulator. The process should be fairly similar to using an Android emulator though, where instead of navigating to Android Studio, you would use Xcode to access an existing iOS emulator or to setup a new one.*

Navigate to Android Studio and go to the AVD Manager.

If you haven’t got an Android Emulator already setup, click on the “Create Virtual Device” button and follow the process to setup a new emulator.

If you already have an Android Emulator configured, click on the “Run” icon to start it.

Once your Android Emulator has started, run the “flutter run” command in VS Code.

Awesome! It worked!

If you see the same as the screenshot above, congratulations! You’ve successfully setup Flutter and are now ready to start your journey developing cross-platform apps using Flutter/Dart!

I’ve included a celebratory image below because things can go wrong with setting up dev environments and if you’ve got to this point, why not have a way to celebrate! :)

If you have found this article useful for helping to setup Flutter on your computer, feel free to follow me here on Medium… and clap to our success! Much appreciated, see you in the next article.