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
- 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
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
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 sdkmanager
shell script located at $android_sdk/tools/bin
crashes.
You can set sdkmanager options with SDKMANAGER_OPTS.
Example:
export SDKMANAGER_OPTS="--add-modules java.se.ee"
sdkmanager --licenses
The crash of sdkmanager
has gone. 😄
Review licenses that have not be accepted. Press (y).
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).
- Start VS Code
- Invoke View>Command Palette… or Command+Shift+B
- Type ‘install’, and select the ‘Extensions: Install Extension’ action
4. Enter flutter
in the search field, select ‘Flutter’ in the list, and click Install
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:
- Start Android Studio.
- Open plugin preferences (Preferences>Plugins).
- Select Browse repositories…, select the Flutter plug-in and click
install
.
4. Click Yes
when prompted to install the Dart plugin.
5. Click Restart
when prompted.
Validate your setup with the Flutter Doctor
- Invoke View>Command Palette…
- Type ‘doctor’, and select the ‘Flutter: Run Flutter Doctor’ action
- 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.
iOS setup
Install Xcode
To develop Flutter apps for iOS, you need Xcode 9.0 or newer:
- Install Xcode 9.0 or newer (via web download or the Mac App Store).
- 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. - You can also configure the Xcode command-line tools from Xcode by opening Preferences>Location and selecting it from dropdown.
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.
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:
- On your Mac, find the Simulator via Spotlight or by using the following command:
open -a Simulator
- 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.
- 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:
- Open the Command Palette (
Cmd
+Shift
+P
) . - Select the Flutter: New Project command and press
Enter
.
3. Enter your desired Project name. Follow project name validation.
4. Select a Project location. The project is created at specified location.
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).
- If you see No Devices message in status bar, click on No Devices
The Command Palette is open with list of default active simulators/emulators of iOS & Android.
2. Select iOS Simulator. The status bar is changed with selected iOS simulator.
Start debugging by clicking Debug>Start Debugging from the main IDE window or press F5
.
You can see your app in simulator.
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.
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.
- Click on blue toobar in your app
2. Open lib/main.dart
in VS Code & change primarySwatch to Colors.green.
primarySwatch: Colors.green
3. Save lib/main.dart
by pressing Cmd
+S
pressing. Notice color of toolbar is changed to green. Notice that the counter didn’t reset back to zero; the application is not restarted.
As always, any feedback is appreciated, so feel free to comment down here or reach out on twitter — and, as always,