Flutter — quick start

Flutter Tech & Coffee — Quick Start

Introduction

Hey everyone, I’ll not go into what Flutter is and why we love it but rather focus on giving you the a quick set of steps and resources on how to get started with it.

Installation

While Flutter development can happen across multiple platforms, I’ll focus on macOS in this tutorial. Nevertheless please find the official resources for installing Flutter based on your platform, here.

Please note that due to variations in development platforms if you face any challenge in covering any point below please revisit at the end of the rest of installations/setups.

Download the latest stable Flutter SDK for your platform, as of now 1.17.5 is the latest for macOS, and unzip it in your software kits folder and then add it to the PATH. For instance:

cd {path your software kits folder}
unzip ~/Downloads/flutter_macos_1.17.5-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"

The above will set the Flutter path for current terminal session. For a permanent solution see this link and do the steps appropriate for you. Here is how I do it to add it to the .bash_profile . I use vi as an editor, but you can choose your preferred one.

vi $HOME/.bash_profile
<then make sure I have this line added>
export PATH="$PATH:{path your software kits folder}"
<then refresh your terminal>
source $HOME/.bash_profile

Run echo $PATH to check that Flutter is added to the path and then which flutter that should return the location of your Flutter installation.

Now, runflutter doctor and this will basically point the next steps you need to undertake, as simple as that :).

You might need to install other dependencies for Android (like Android SDK and Android Studio) or iOS and macOS (like XCode), and I’d advise you follow those steps, as they are customised for your system. On macOS you will need to have all Android or iOS steps to be able to deliver a Flutter application.

Generally, I’d advice you to perform the following steps (if you did not do it already):

• install or update your Xcode from Mac App Store. Just search for it or go here. Be advised that updating your macOS version might be required… Then open Xcode and install additional components if prompted for. Check additional advice here.
• start the iOS simulator withopen -a Simulator . Check additional advice here.

At this stage you should be able to go to your development folder and run flutter create default_project , this will create a basic project for you, and then cd default_project and withflutter run you will eventually see your default application starting on the iOS Simulator. Should you want to run on a physical device you will need to connect one to you development platform and perform a set of settings in Xcode as mentioned here. See below how I signed in.

• install or update your Android Studio. Search it up or go here. One piece of advice is to go and check in Preferences > Plugin that Flutter and Dart plugins are installed, if not, install them and restart the IDE.

At this stage, if you still have the iOS Simulator up and your physical device connected, and if you open the created Flutter project in Android Studio, or if you create new Flutter project in Android Studio (File > New > New Flutter Project…) you will be able to launch the project on one of the available devices like below, click on the run button (the green triangle). Make sure that the physical device is unlocked if you choose it.

In Android Studio you can define additional Android Emulators from AVD Manager and then start them. They should then be available in the devices to run your project against. Obviously this are using Android OS.

• install also VS Code from here and follow the instructions here, should you want to use it as your development platform.

Do run flutter doctor as there might be other dependencies that your system needs. Just install everything that is still pointed out.

Once flutter doctor shows not more issues, then you are good to go to the next steps.

Default Flutter project & run it.

Well, at this stage you have already the default Flutter project :) — Flutter Demo — set up on your development environment. You created it either with flutter create default_project or with create new Flutter project in Android Studio (File > New > New Flutter Project…).

We also have minimally covered above how to run from Android Studio your project on iOS simulator or Android emulator. Even more, we touched on how you can simply run on real devices.

Explore ahead and visit official documentation

Now you can go ahead and explore the main.dart file in your project. It is not the purpose of this getting started tutorial to explore the Flutter code, but just get you started with the development environment and the demo project.

As Flutter makes extensive use of widgets I’d advise you to review in the official widgets documentation page the widgets used in the demo project like: StatelessWidget, StatefulWidget, Scaffold, AppBar, Text and so on.

I hope this quick intro to Flutter was useful and stay tuned as more advanced tutorials will keep coming. Don’t hesitate to like, share and comment :)

See you!