Getting started to develop Flutter

In last couple of months, I’ve started to observe Flutter community. I found it is a very active and interesting one. With supporting from Google, Flutter have a big potential to be a main competitor of React Native and other mobile development frameworks. Also I’m the guy who always love to learn new things so why not setting up my Mac to start to develop Flutter applications. In this post, I will guide you how to get started to develop Flutter and create a simple Flutter application with VS Code.

Prerequisite

You need to install JDK, Android SDK, Android Studio, Xcode and also configure them to work properly before following these steps to set up your Mac.

Install Flutter SDK

Installing Flutter SDK is easy as pie. You only need to download Flutter SDK from Flutter.io then unzip the file to a directory on your hard disk.

As I’m using fish shell for Terminal, I update $PATH environment variable by adding following line to ~/.config/fish/config.fish so every time I open Terminal, I can access Flutter’s command immediately

set PATH /Volumes/Storage/flutter/bin $PATH

After set $PATH environment variable, open Terminal and enter

flutter doctor

This command will diagnostic your environment and list all tasks you need to do before starting to code Flutter. Your Terminal should show something similar as below picture.

Just read the content carefully and follow the instructions to install all the things that Flutter’s doctor lists. After finish all of them, you should see the screen below.

Maybe you still have “No devices available” message, but it’s not a big deal. After running an Android emulator or an iOS simulator, run Flutter’s doctor again this message should disappear.

IntelliJ IDEA, Android Studio or VS Code

Both Android Studio and VS Code are free and both of them have great support for Flutter development through plugins. IntelliJ IDEA is not free but you can get Community edition, it’s also free and support Flutter development. AFAIK, one of great feature which VS Code lacks is UI inspection. But you don’t need to wait long, it will available in next version of VS Code’s Flutter plugin (v2.17). So choosing between Android Studio and VS Code is up to you. My choice is VS Code as I tend to work more with VS Code.

UPDATE: While I’m working on this post, Flutter team already release VS Code’s Flutter plugin v2.17 which include widget inspector.

Set up VS Code

Flutter doctor can inform you if you forget to install Flutter plugin for IntelliJ IDEA but it does nothing for VS Code. For VS Code, you need to do it manually so the first thing that need to be done is installing Flutter plugin.

Installing Flutter plugin for VS Code will also install Dart plugin as Flutter plugin is depended on it. That’s all you need to do to set up VS Code to start coding Flutter applications.

Create Flutter application with VS Code

After installing Flutter plugin for VS Code, you can Cmd + Shift + P then enter “Flutter” in the prompt and select “Flutter: New Project” from the list

VS Code will ask you Flutter project’s name. Input it and press Enter, then select directory you want to save the project, new Flutter project will be created.

After a while, you can run the project by press F5 then select Android Emulator or iOS simulator to run it.

Now you can start to develop your first Flutter application.

Google invests in Java, Kotlin but they are only for Android development, now they introduce Flutter that supports both Android and iOS. With many advantages of Flutter, it encourages more developers to learn and try. I hope that with my post you can get started to develop Flutter applications quickly.