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)
• Disk Space: 1.17 GB (does not include disk space for IDE/tools).

Get the Flutter SDK

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

• flutter_macos_v0.5.1-beta.zip

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
2. Invoke View>Command Palette… or Command+Shift+B
3. Type ‘install’, and select the ‘Extensions: Install Extension’ action

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.
2. Open plugin preferences (Preferences>Plugins).
3. Select Browse repositories…, select the Flutter plug-in and click install.

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…
2. Type ‘doctor’, and select the ‘Flutter: Run Flutter Doctor’ action
3. Review the output in the ‘OUTPUT’ pane for any issues

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).
2. Configure the Xcode command-line tools to use the newly-installed version of Xcode by running sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer from the command line.
3. You can also configure the Xcode command-line tools from Xcode by opening Preferences>Location and selecting it from dropdown.

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.
2. Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the Window > Scale menu in the simulator.

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) .
2. Select the Flutter: New Project command and press Enter.

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,