Flutter

Getting Started With Flutter – (1) Setting Up The Development Environment


Subscribe On YouTube

Flutter™ is Google’s UI toolkit for building building applications for mobile, web, and desktop from one single codebase. Flutter relies on the dart programming language and uses a compiler for natively building applications for the various target platforms.

This tutorial series is for everyone who wants to get started with Flutter. No prior knowledge is required as we’ll go through every step which is needed to build Flutter application in detail. This first episode is about setting up the development environment for Flutter and Dart and running your first Flutter application. Let’s get started …

Download And Install The Flutter SDK

First step is to setup the Flutter development environment. The SDK is available for the following platforms:

  • Windows
  • macOS
  • Linux

The installation procedure depends on the platform you’re working on. In the following it is assumed that you’re working on macOS. However detailed installation instructions für Windows and Linux can be found at https://flutter.dev/docs/get-started/install.

To install the Flutter SDK on macOS you first need to download the SDK from https://flutter.dev/docs/get-started/install/macos:

Click on the blue button to download the latest stable Flutter SDK release as a ZIP archive. The ZIP file which is being downloaded includes the current version number of the Flutter SDK in its name, e.g. flutter_macos_v1.9.1+hotfix.4-stable.zip.

The next step is to extract the archive to a location on your computer in which you’d like to store the flutter SDK files. E.g. you can create a new folder development in your user’s directory and extract the content of the archive in this location:

$ cd ~
$ mkdir development
$ cd development
$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.4-stable.zip


Inside the the folder development you should now find a subfolder flutter which contains the files of the Flutter SDK.

Adding Flutter SDK To Your Path

Next we need to add the /flutter/bin folder to the PATH variable to be able to execute the flutter command from any location. This can be done by using the following inside of the development directory:

export PATH="$PATH:`pwd`/flutter/bin"

Using the export command sets the PATH for the current terminal session. This means that after opening up another terminal session, the export command has to be executed again to make the flutter command available.

Setting The Path Permanently

In most cases you’d like to add the Flutter SDK path permanently to your PATH variable, so that you’re able to use the flutter command in any terminal window. Adding the path permanently can be done by performing the following actions.

Open file .bash_profile (located in your user’s folder) and add the following line at the bottom:

export PATH="$PATH:[PATH_TO_USERS_FOLDER]/development/flutter/bin"

After restarting the terminal you know should be able to execute the flutter command from any location:

You can also check for the location from which flutter is used by using the which command in the following way:

$ which flutter

You should then be able to see an output which is similar to the following screenshot:

Futter Doctor

Now that we’ve added to the PATH we’re ready to use the flutter command for various purposes. By using the doctor option you can check if we need to install further dependencies

$ flutter doctor

Setup Emulators

When developing Flutter apps for iOS or Android you need to setup corresponding emulators on your system first. By using these virtual mobile devices you can run those apps easily when developing. If you’d like to setup XCode and use the corresponding emulator on your Mac just follow the steps in listed at

iOS

In order to develop Flutter applications for iOS you need to be working on an macOS platform and install XCode as a prerequisite. Having installed XCode is also a prerequisite for being able to use the iOS emulator. XCode is also a prerequisite for using the iOS emulator on your system. To install XCode and setup the emulator just follow the steps listed at https://flutter.dev/docs/get-started/install/macos.

Android

In order to develop Flutter apps for Android you need to make sure to perform a full installation of Android studio (https://developer.android.com/studio) on your system. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

In order to setup an Android emulator you need to use the integrated AVD Manager to create an Android Virtual Device which then can be started as an emulator on your system.

Setting Up Visual Studio Code

To develop Flutter application with Dart in general you can use any code editor you like. However there are two recommendations:

  • Visual Studio Code
  • Android Studio / IntelliJ

Both options supports writing Flutter applications with Dart in many ways. In the following we’re going to setup Visual Studio Code.

First you need to make sure to download the latest version of Visual Studio Code for you platform from https://code.visualstudio.com/.

Having downloaded and installed Visual Studio Code you then need to make sure to add the Flutter extension to the editor. Switch to the extension tab and search for “flutter”:

The first entry and in the search result list is the extension we’re looking for. By installing this extension we’re adding support for editing, refactoring, running, and reloading Flutter application, as well as support for the Dart programming language.

Create And Run Your First Flutter

Now that everything is setup we’re ready to create the first Flutter project from scratch. The first option is to create the new project on the command line by using the flutter command once again:

$ flutter create my_flutter_app

By using the option create we’re telling flutter to create a new project. The name of the new project folder is specified by using the second parameter. After the project is created you can change into the newly created project folder:

$ cd my_flutter_app

Within this directory you can use the flutter command with option run to start the default flutter application in the simulator (the simulator must be started before, so that it is already running):

$ flutter run

In the following screenshot you can see the output which is shown on the command line after the app has been launched successfully:

Now you should be able to see the following result in the simulator:

The default Flutter app is a very simply one. It consists of four elements:

  • AppBar on top containing the text “Flutter Demo Home Page“
  • Two text element in center poosition
  • An action button

If you click on the + button at the right bottom the counter which is displayed in the middle of the screen is increased by one:

You can also perform the all the steps directly in Visual Studio Code. Because we’ve installed the Flutter extension before you can find various flutter command when opening up Visual Studio Code’s command palette by using shortcut ⇧⌘P and typing in flutter to search for all Flutter-related command:

Here you can find commands e.g. to create a new Flutter project Flutter: New Project, launch the emulator with Flutter: Launch Emulator, or select the SDK location with Flutter: Change SDK.

Once the project is created and the emulator is started you can start the Flutter project in debug mode by using the Start Debugging (F5) menu entry or just hitting F5 on your keyboard:

The project is then launched in the already running emulator and inside Visual Studio Code you’ll see another control bar which can be used to control the execution of the app:

ONLINE COURSE: Learn Flutter & Dart to Build iOS & Android Apps

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps

Learn Flutter & Dart to Build iOS & Android Apps

  • Build engaging native mobile apps for both Android and iOS
  • Use features like Google Maps, the device camera, authentication and much more!
  • Learn all the basics and advanced features which you find in no other course

Go To Course

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.


Using and writing about best practices and latest technologies in web design & development is my passion.