Flutter Environment Setup for iOS

Google’s cross-platform mobile UI framework Flutter has moved out of beta to preview release. It deviates from TypeScript/JavaScript based frameworks e.g. React Native, Ionic, Fuse & rather uses Dart language.

In this tutorial you use Flutter to create the simplest “Flutter Demo” application in Visual Studio Code. By using the Flutter extension, you make VS Code into a great lightweight Flutter IDE.

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

  • Operating Systems: macOS (64-bit)

Get the Flutter SDK

  1. Download the following installation bundle to get the latest beta release of the Flutter SDK:

2. Extract the file in the desired location, e.g.: ~/Downloads through macOS built-in extracting tool/unzip CLI in terminal/third-party extracting tools

3. Open terminal and go to root directory of Flutter folder, e.g.:

cd ~/Downloads
root directory of Flutter folder

4. Add the flutter tool to your path:

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

Once PATH is set, you can verify it by running

flutter --version
output of ‘flutter — version’ command

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup:

flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example:

[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)✗ Android license status unknown.[!] iOS toolchain - develop for iOS devices (Xcode 9.3)✗ ios-deploy out of date (1.9.2 is required). To upgrade:brew upgrade ios-deploy[✓] Android Studio (version 3.1)✗ Flutter plugin not installed; this adds Flutter specific functionality.✗ Dart plugin not installed; this adds Dart specific functionality.

Android license status unknown’ issue comes if sdkmanagershell script located at $android_sdk/tools/bin crashes.

crash of sdkmanager shell script

You can set sdkmanager options with SDKMANAGER_OPTS.

Example:

export SDKMANAGER_OPTS="--add-modules java.se.ee"
sdkmanager --licenses

The crash of sdkmanagerhas gone. 😄

Review licenses that have not be accepted. Press (y).

list of licenses not accepted

To fix ios-deploy out of date issue, don’t run

brew upgrade ios-deploy

as suggested byflutter doctor .

brew no longer maintains it. Instead of, run

npm install -g ios-deploy

Install the Flutter plugin

There is an editor plugin for Android Studio, IntelliJ, or VS Code. However, I recommend to go for VS Code(Visual Studio Code).

  1. Start VS Code
Extensions: Install Extension in Command Palette

4. Enter flutter in the search field, select ‘Flutter’ in the list, and click Install

Flutter plugin

5. Click ‘Reload’ to reload VS Code

To get rid of ‘ Flutter plugin not installed’ & ‘Dart plugin not installed’ issues with Android Studio displayed in console of Flutter doctor, install these:

  1. Start Android Studio.
Flutter plugin

4. Click Yes when prompted to install the Dart plugin.

Dart prompt

5. Click Restart when prompted.

Validate your setup with the Flutter Doctor

  1. Invoke View>Command Palette…

If you get warning of

WARNING: your installation of Flutter is x days old.                      ║║                                                                            ║║ To update to the latest version, run "flutter upgrade".

Run

flutter upgrade

It’ll download latest SDK from Github & install at PATH of Flutter SDK.

flutter upgrade

iOS setup

Install Xcode

To develop Flutter apps for iOS, you need Xcode 9.0 or newer:

  1. Install Xcode 9.0 or newer (via web download or the Mac App Store).
command-line tools in Xcode

This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.

4. Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running sudo xcodebuild -license from the command line.

Xcode & Apple SDKs agreement

Type ‘agree’ to accept the terms of the software license agreements.

With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.

Set up the iOS simulator

To prepare to run and test your Flutter app on the iOS simulator, follow these steps:

  1. On your Mac, find the Simulator via Spotlight or by using the following command:
open -a Simulator
  1. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.

Create a new project in VS Code

To create a new Flutter project from the Flutter starter app template:

  1. Open the Command Palette (Cmd+Shift+P) .
Flutter:New Project command in Command Palette

3. Enter your desired Project name. Follow project name validation.

project name validation

4. Select a Project location. The project is created at specified location.

Flutter project created in VS Code

Running and Debugging

Selecting a target device

When a Flutter project is open in VS Code, you should see a set of Flutter specific entries in the status bar, including a Flutter SDK version and a device name (or the message No Devices).

Flutter Device
  1. If you see No Devices message in status bar, click on No Devices
No Devices

The Command Palette is open with list of default active simulators/emulators of iOS & Android.

iOS simulator in Command Palette

2. Select iOS Simulator. The status bar is changed with selected iOS simulator.

iOS simulator in status bar

Start debugging by clicking Debug>Start Debugging from the main IDE window or press F5.

Debug bar

You can see your app in simulator.

Flutter app

Material Design

Material Design has been launched by Google in 2014 to develop a single underlying system that unifies the user experience across platforms, devices, and input methods. Flutter follows Material Design to build UI & UX. You can see a blue toolbar in your app on iOS simulator which is prevalent in all Android apps. Each UI class imports material.dart package.

material.dart package

Hot Reload

Live reload has been around in hybrid app frameworks e.g. Ionic, Fuse for long. React Native launched by Facebook changed the game with introduction of hot reload. Flutter supports it as well.

  1. Click on blue toobar in your app
blue toolbar in app

2. Open lib/main.dartin VS Code & change primarySwatch to Colors.green.

primarySwatch: Colors.green

3. Save lib/main.dartby pressing Cmd+Spressing. Notice color of toolbar is changed to green. Notice that the counter didn’t reset back to zero; the application is not restarted.

Counter didn’t reset back to 0

As always, any feedback is appreciated, so feel free to comment down here or reach out on twitter — and, as always,

Software Architect