As a cross platform developer, a Mac OS system can be an ideal environment for building Flutter apps. Unlike a Windows system, the Mac OS environment can build both Android and iOS apps. Windows can only build an Android app.
This guide will be a full walk through from having a fresh Mac OS machine to building a Flutter app. If some setup has already been done on your system, you can use the steps for reference but otherwise skip them.
I’ve developed apps using Flutter on both iOS and Android which you can see below.
Hardware
This guide will walk through an iOS setup using Mac OS. Any Mac laptop or desktop can be used but the more RAM and processing power you have, the better. While the guide does not walk through an Android setup, many of the steps will be used in both situations. This guide uses the latest MacOS and Xcode, Catalina and XCode 11 respectively.
Preliminary Setup
Before setting up Flutter, install XCode. The easiest method is to find it in the Mac App Store. Note that you should update to the latest version of Mac OS before installing XCode as Apple sometimes requires a certain version of Mac OS to install XCode. To update your Mac OS refer to Apple’s guide.
Open a command prompt and run the following command.
sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer
sudo /usr/bin/xcodebuild -runFirstLaunch
sudo /usr/bin/xcodebuild -license accept
Open XCode and create a sample project to ensure everything is properly installed.
Use the sample project created to open up a phone simulator. Choose a phone image from the menu such as the iPhone 11 and click the play button to launch a new simulator. Keep the simulator on the screen for when you install and launch your Flutter app.
Install Visual Studio Code. Flutter apps cannot be developed inside of XCode. Android Studio can be used but VS Code is lighter weight and has excellent Flutter support. This is the recommended editor to use. For now, just download and install the MacOS version of VS Code.
The Flutter SDK uses Git as a repository. You will likely use Git for your repository too. Git will likely already be on your system and to ensure that it is there, use the command.
git –version
If git isn’t available in the system, install it by downloading from git-scm.com.
Flutter
Install Flutter for MacOS. The install page includes a setup guide. Follow the instructions on the page to unzip and place the Flutter SDK into a folder. In this example, flutter is installed in “$HOME/Development/flutterSDK”
Update your PATH by opening or creating a .bash_profile. If you do not have a .bash_profile, create one using these instructions. Open the .bash_profile with your favorite editor and add the following to add Flutter in your PATH. Your Flutter folder may be in a different location so customize to fit your system.
export PATH=”$PATH:$HOME/Development/ flutterSDK /bin”
In the command line, type “flutter doctor -v”. This should show all Flutter related tools installed, including Android Studio and VS Code. The “-v” option will display detailed install information.
Create a Flutter app by typing the command below. A recommendation is to put all your apps in a folder. For this example, the app folder is ” $HOME/Development/FlutterApps”. Create a Flutter app using your organization.
flutter create --org com.organization app_name
ex. flutter create --org com.acme discount_calculator
The flutter tool will create a new folder with your app name and a scaffold app that tracks a counter.
Open VS Code and click “Open Folder” from the Welcome Screen or click the explorer icon and click the “Open Folder” button. Navigate to your app top folder and select the folder. In our example, it would be “$HOME/Development/FlutterApps/discount_calculator”
When the folder is loaded, VS Code might ask you to install several Flutter and Dart plugins. If not, click on the extensions icon on the lower left right below the bug icon.
Some recommended extensions are
- Flutter
- Dart
- Flutter Tree
- Awesome Flutter Snippets
- Kotlin
- Kotlin Language
With your iOS simulator open, you should now be able to run the Flutter app. Go to Debug->Start Debugging (F5). If you see a Select environment option, choose Dart and Flutter. VS code will build the app onto the open emulator.
If everything was set up correctly, you will see this screen on your simulator.
