Configure the environment

Here we take a look on the steps to install Flutter, configure the environment and test if everything is OK to start developing.

Installing Flutter

Since Flutter can be installed on several operating system types, on the Flutter official page there are howtos that will help us install.

Overall, on all of these howtos, we will:

  • Get Flutter SDK
  • Configure the system variables and paths for Flutter
  • Install native code support (Android, Xcode, etc.)

Choosing and installing the IDE

In order to run native code (Xcode on MAC operating Systems and Android in all platforms) we must have a native code editor.

So, for Android, we must install Android Studio. Her is the official Android Studio website with tips to help you install Android Studio on your machine: https://developer.android.com/studio

For IOS development we must install XCode. Here is the official (iTunes) site to download and install XCode: https://apps.apple.com/us/app/xcode/id497799835 .

For both of the systems it is really good to have a native virtual device emulated, like:

  • Android Virtual Device
  • iOs Simulator

Or to have a physical device. In some cases, the Android device is not recognized by the system. We need to install the adb (Android Debug Bridge) and to have the specific device driver for adb.

Create your first Flutter App

With Visual Studio Code installed on your PC, access the Command Palette

then write the word Flutter and you will see that some comments are shown.

Choose New Project

The New Project wizzard will ask you the name of the project and its location. After filling these steps the wizzard will create the new project.

As we can see, the wizzard created a fully runnable app with all files and folders.

To run the App, we just need to open the main.dart file (the starting code) and then access the Run menu and choose the Start Debugging option.

Visual Studio Code will ask us where we want to run the app. If no device is connected to the system, we will have to choose an emulator.

While running, our app will look like this:

Create your website with WordPress.com
Get started
%d bloggers like this: