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.
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.:
4. Add the
flutter tool to your path:
Once PATH is set, you can verify it by running
Run flutter doctor
Run the following command to see if there are any dependencies you need to install to complete the setup:
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).
[!] 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
You can set sdkmanager options with SDKMANAGER_OPTS.
export SDKMANAGER_OPTS="--add-modules java.se.ee"
The crash of
sdkmanagerhas 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 by
flutter 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
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
Yes when prompted to install the Dart plugin.
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".
It’ll download latest SDK from Github & install at PATH of Flutter SDK.
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/Developerfrom 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 (
- Select the Flutter: New Project command and press
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
You can see your app in simulator.
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.
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
lib/main.dartin VS Code & change primarySwatch to Colors.green.
Spressing. 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,