Flutter is a versatile UI toolkit by Google for crafting natively compiled applications for mobile, web and desktop from a single codebase. Developers appreciate it due to its fast development, expressive UI and hot reload feature for rapid iteration. Getting it up and running is pretty simple, albeit a bit lengthy.
Here is the official doc if you are looking for more guidance: https://docs.flutter.dev/get-started/install/macos/mobile-ios
Installing things
Install Rosetta 2
What is this? Emulation software for running Intel apps on Mac. Open the terminal and paste this command:
sudo softwareupdate --install-rosetta --agree-to-license
Install xcode
Xcode is Apple’s integrated development environment (IDE) for building software. Open the App Store and search for xcode. Install it.
Install Flutter
Run the below code in your terminal:
brew install --cask flutter
After it successfully installs, run the command flutter doctor in your terminal:
flutter doctor
It will summarize some packages related to flutter that we’ll need. We can work through the list to make sure we cover each requirement.
Towards the bottom, there is also a note to disable analytics if you don’t want to report usage and diagnostic data. (Your choice – run the command to disable if you wish).
Install Cocoa Pods
This is just a boring dependency manager for Swift and Objective-C projects. Completing this from homebrew is the simplest. Type in the terminal:
brew install cocoapods
Run flutter doctor again after to ensure Cocoa Pods installed correctly (there should be no red x related to Cocoa Pods now).
Install simulator
This will take a bit as it’s more than 7gb.
xcodebuild -downloadPlatform iOS
Only things left to sort are Android Studio & the Android toolchain which requires the Android SDK.
Install Android Studio
Android Studio is Google’s official IDE for Android app development.
Run the below command in your terminal to install it:
brew install --cask android-studio
Once that is complete, open Android Studio from your apps.
Leave Do not import settings and press OK.
Click don’t send if you prefer not to send usage data with Google or their partners.
To find Android Studio setup, pick Standard, then click next.
Click next again. It will download all the SDK stuff you need.
Accept all the license agreements (not pictured but should be straightforward).
Wait a few minutes for it to complete this step in Android Studio. Once done, you can click Finish to close.
Now if you run flutter doctor, you’ll see we’re only missing two things:
- the cmdline-tools component
- accepting the SDK licenses
To get cmdline-tools, go back to Android Studio. In the menu, click Android Studio -> Settings -> Languages & Frameworks.
Then click Android SDK.
Under the SDK Tools tab, tick the box called Android SDK Command-line Tools (latest). Then press OK.
That will take a few seconds. Press Finish once it’s done.
And FINALLY – to accept the SDK license, run this command in terminal:
flutter doctor --android-licenses
Pay attention for this part because you’ll need to press Y like 5 times to accept everything.
Final Flutter Doctor Check 🏥
Run flutter doctor one last time to check that you have all the bits and pieces you need.
If there are issues, try to reinstall those packages or repeat those steps in case there was an error with an installation.
Get Flutter set up with VSC
Getting it working with VSC is quick and simple. If you don’t have VSC installed, go get that first.
Open Visual Studio Code, go to Extensions and search for the Flutter extension.
Make a new folder on your computer to house your Flutter projects. I made one called Dev under Users/myname.
Open your folder in VSC.
Let’s make our first Flutter app to test out that everything is working.
In the VSC Terminal you just opened, make sure you are in your new folder where you want your flutter apps to be. If not, navigate there with cd.
Run this command to create your Flutter app:
flutter create your_app
It should have generate your project files in the folder now!
Let’s simulate the app on an iPhone to make sure that aspect of the setup is working.
To start this, simply click on the bottom right text that I have highlighted (reads macOS (darwin) on my image).
From the dropdown that appears at the top, click Start iOS simulator.
After a bit, you should see a phone appear! You can move it around and resize it to fit your workflow.
You have two options to launch your app on the device:
- Click the Debug Play icon on the top-right
- Press F5
It should look something like this (except my UI counter is on 3 because I was clicking stuff 🤭).
Last thing you might want to do is confirm that the simulated app responds to changes in your code.
Open the main.dart file under lib. Change some of the text in the title string and save your main.dart file.
Thanks for reading and good luck in your journey with Flutter. 🦋 (That was the easy part).