Here I will be guiding you through the Flutter development environment setup on macOS in less than 20 minutes. Its 2020 and being a freelancer or having a small team to manage different codebases for a single app is a nightmare, Flutter got you covered.
It’s one of the most popular frameworks for App development today.
Now before we start, it is recommended to have the following prerequisites:
- OS: macOS X
- Disk Space: At least 2.8 GB for flutter SDK
- Tools: bash/curl, mkdir, rm, unzip, which, zip and git 2.x
All the above-mentioned tools are generally available as command-line tools on Mac except git. In short, git is a version control system and flutter uses it behind the scenes.
If git isn’t installed on your system then you can download it from here: https://git-scm.com/. After all the requirements are met let us proceed with installing the flutter SDK from flutter official docs or directly from here.
Now unzip the downloaded file in your desired location and the unzipped folder will be ‘flutter’, this is the complete flutter SDK tools.
For macOS
It is recommended to have a separate folder for this SDK. In my case it is, MacintoshHD> users> shashankbiplav> Developer> Flutter.
Now we need to update our path permanently.
Navigate to your ‘users’ folder and toggle to view hidden items with the shortcut ⌘ + ⇧ + •. Now important, if you are on macOS Catalina or higher you will find a hidden text-edit document ‘.zshrc‘. If the file is doesn’t exist then create one.
For older macOS versions you will find a hidden text-edit document ‘.bash_profile‘. If the file is doesn’t exist then create one.
Now open this file with any text editor and we need to set the path of SDK here. To set the path to add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where of your Flutter SDK.
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
After the path has been set up correctly open the terminal app and run the following command to verify the path:
echo $PATH
This is going to give us the path of flutter SDK.
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Users/shashankbiplav/Developer/flutter/bin
Now run the following command to analyse Flutter.
flutter doctor
Now after this the results of analysis will look something like this.
[✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.5 19F101, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.47.1)
[!] Connected device
! No devices available
! Doctor found issues in 1 category.
Make sure that the first box is checked green if you don’t have Xcode, VS Code, or Android studio installed. Now the SDK setup is complete and let’s move on with the IDE platform setup so that we can build both Android and iOS apps.
Installing Xcode
The perks of using macOS is we can build apps for both Android and iOS simultaneously and using Flutter makes it like a breeze.
For iOS development with flutter, you will need Xcode 9.x or newer. Install the latest stable version of Xcode from the Mac App Store or using this link.
Once the Xcode installation is complete, we need to configure the Xcode command-line tools to use the latest installed Xcode version. So execute the following from the terminal:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
This path is optimal for most cases when you want to use the latest version of Xcode else if you want to use a different version you must specify that path instead. The older version of Xcode will work but it is not recommended.
If you have installed the Xcode for the first time then you must sign the Xcode Licence Agreement by either opening Xcode once and confirming or running the following command in the terminal:
sudo xcodebuild -license
iOS Simulator Setup**
Xcode ships with the iOS Simulator as a complete package. Once Xcode is installed and the above steps followed you can launch the simulator via ‘Spotlight’ or by running the following command in terminal:
open -a Simulator
For Flutter development simulator must be a 64-bit device, i.e, iPhone 5s or later.
Android Setup
Download and install Android Studio from here.
Navigate through the Android Studio Setup Wizard to install the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which Flutter requires for android development.
Installing Flutter and Dart Plugins
In Android Studio open Preferences or by pressing ⌘ + , or by navigating to top left corner and selecting Preferences.
Navigate to Plugins>Marketplace and search for Flutter and Dart plugins. Install and enable both and restart the Android studio.
Android Emulator Setup
Enable VM acceleration on your mac and proceed to create a virtual device. Open AndroidStudio> Tools> Android> AVD Manager and select Create Virtual Device.
Choose your preferred device and Android version you want to emulate (generally, x86 or x86_64 image is recommended) and select Next.
In the Emulated Performance section select Hardware-GLES 2.0 to enable Hardware Acceleration. More details can be found here.
Once you are satisfied with the AVD configuration select Finish.
Wallah, now you can start coding your Flutter App in Android Studio as well as run simultaneously on both iOS Simulator and Android Emulator.
But wait, Android Studio is a full-featured IDE and is a Battery eater. If you have an older generation Mac or just want to conserve battery then we need an alternative.
This is where Visual Studio Code comes into play. Let’s get started with configuring VS Code battery is your concern.
Visual Studio Code Setup
The major advantage of the VS code is that it is very lightweight (basically an instance of a Chrome window). Download VS code from here.
Flutter and Dart extensions for VS Code
In VS Code go the Extensions or press ⇧ + ⌘ + X or by navigating to the Extensions Marketplace. Search for Flutter and Dart extensions and install them.
Restart VS code so that extensions become active and you can start coding your Flutter App.
Creating Flutter App from the integrated VS Code terminal
Open VS Code Command Palette by pressing ⌘ + ⇧ + P and search for ‘Flutter: New Project‘ and select it.
You can open a terminal inside the VS Code by going to Terminal> New Terminal and type the following command to create your flutter project.
flutter create your_project_name
You can also run your pre-configured Emulator and Simulator from VS code by pressing fn + F5 and select the device.
Conclusion
Congrats! you did it. This was all about the Flutter Development Environment setup**on macOS**. I hope you fellas liked this post.
If you are having a Windows machine refer to our other post on Flutter Development environment setup on Windows.
Still if you want a further deeper dive refer to Flutter official docs here.
If you are having any issues with the setup don’t forget to Google it and still if you don’t find any solution you can use the comment section below to reach out to us and we will get back to you.
Thanks for your time and keep coding because its so much fun!