Welcome to part 2-B of Flutter tutorial series. In this article I’m going to guide you how to install Flutter on MacOS computer (Macbook Pro, iMac, Mac-mini, etc.. ) . Ok, let’s start 🙂
In order to install Flutter on MacOS you have to install and configure a couple of dependencies like Xcode, Cocoa Pods and Android Studio. But, don’t worry, I’m going to cover all of these steps by step. If you already have installed any of these, you are free to skip those steps.
Please note: Depending on your Internet speed, this process might take two to six hours. So make sure you’ve enough time, reliable internet connection with enough data. Overall, we’ve to download ~12GB of data to finish the installation.
To set up this complete Flutter dev environment on your MacOS, your computer must meet these minimum requirements:
- OS: MacOS High Sierra,Snow Leopard, Mojave, or Catalina
- Free Disk space: Minimum 15GB
Steps we going to follow
- Install Xcode
- Install Cocoapods
- Install Android Studio with Flutter Plugins
- Install Visual Studio Code with Flutter Extension
- Install Flutter
- Verify Installation with Flutter Doctor
- Create an example App
- Test our example app with iOS and Android simulators
1. Installing Xcode
Xcode is the application development environment for Apple operating systems like MacOS, iOS, iPadOS, watchOS, and tvOS. Flutter uses use this environment for compiling our apps and make it installable on iOS devices. Xcode also provides iOS simulators, so you can test your app on a real iOS device even you don’t have an iPhone.
Installing Xcode is really simple as it’s available on the App store. Anyway, the process might take a while as there is ~8GB of data to be downloaded. Follow the steps below to complete this task;
- Open MacOS App Store
- Search for Xcode
- Find Xcode in the search results and click on download button to start download and installation
- Once the installation has been completed, find Xcode on app launcher and open it.
- Agree to terms and conditions and then Xcode will start installing its components. Once the process is completed, you can close Xcode window.
2. Installing Cocoapods
Cocapods is an another dependency for Flutter which is used to retrieve the iOS platform side’s plugin code that responds to your app plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
Installing Cocoapods is just taking only two commands. Follow the steps below to get it done.
- Open “Terminal” Application from App Launcher.
- Type the below command and hit enter:
sudo gem install cocoapods
- Once the installation process is completed, run type the command below and hit enter.
- Wait till the process get completed.
That’s all. Close the Terminal window to move into next step.
3. Install Android Studio with Flutter and Dart Plugins
Android Studio is our primary tool to write our code, debug, test and build them. Android studio works well for both iOS and Android app development and integrate to test them with simulators or real devices.
I’m going to install Android Studio with an amazing tool called JetBrains Toolbox. JetBrains is the original company and developers behind the Android Studio. Rather than manually install Android studio, I use JetBrains Toolbox because it makes me easier to keep our installation up to date and switch between versions if we encounter an issue with a newly installed version.
Follow the steps below to get this step done;
- Visit https://www.jetbrains.com/toolbox/app/ and download JetBrains Toolbox.
- Open the downloaded file and follow the installation process.
- Once the installation is done, open the application from app launcher.
- Agree to terms and conditions. Then find the “Android Studio” on the applications list and click Install.
- Once the download and installation process has been completed, start Android Studio from Launcher.
- Agree to terms of conditions and follow the installation wizard. This process might take a while as some components still to be downloaded and installed.
- Once the startup screen appeared, Click on Configure -> Plugins .
- On the plugin dialog, Search for “Flutter” and hit enter.
- Find the Flutter plugin in search results and click “Install”. (We don’t need to install Dart plugin separately as it will be automatically installed with Flutter plugin)
- Close Android Studio window
4. Install Visual Studio Code with Flutter Extension
Visual Studio Studio (VS Code) is an another IDE you can use to develop Flutter apps. VS code also offers same features like Android Studio in a much lighter way, so some developers prefer to use it rather than using Android Studio. Specially if you’re not writing Android Native codes.
Installing VS Code is super easy. You just have to visit https://code.visualstudio.com/download , select VS code for Mac and download. Once the download process is completed , open the file and install it. Then, open VS Code from launcher, go to extensions, search for “Flutter” and install it.
5. Installing Flutter
Now all of our dependencies are ready and time to install Flutter. Once installed, we can use
flutter doctor to verify our dev environment. Follow the below steps to complete this step;
- Visit https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
- Select the latest version from Stable channel and download it.
- Once to download process is completed , open the terminal app, because we got few commands to run.
My downloaded Flutter zip files was ended up at Downloads directory with file name
flutter_macos_v1.9.1+hotfix.2-stable.zip , But that can be different for you based on the Flutter version you downloaded.
Now let’s navigated to the download directory from your terminal. Type the below command and hit enter.
Now let’s extract the downloaded file. The command is below;
Now we’ve to move our flutter directory to our development libraries directory. In my case, i’m going to create a directory in my root folder named development and move this Flutter library to there.
Run the command below to create your development libraries directory.
Run the command below to move Flutter library in to our development directory.
mv flutter ~/development
Now we have to add our Flutter library location to our system path. This makes it easy for us to access Flutter from command line and helps other tools like Android Studio to find where the Flutter library is installed in our system.
Before we start doing that, we need to detect what command line shell is enabled in our system.
bash is the most common command line shell enabled in MacOS. But for some computers,
zsh is enabled by default. We can detect it by running the command below;
Once the command line shell is detected, we’ve to edit our shell startup configuration file accordingly to add Flutter path.
If your command line shell is bash, run the command below to open startup configuration file to edit.
If your command line shell is zsh, run the command below to open startup configuration file to edit.
once the editor window is appeared, press “
control + - ” and then press “
control + V” . This will bring your pointer to end of the file. Then enter following text.
Then hit Enter, press “
control + O” , hit Enter again and then press “
control + X “. This will save the changes and close the editor.
That’s how you install flutter on MacOS 🙂 . Now Close the terminal app (required) and start it again to verify the installation.
6. Verify installation with flutter doctor
Hope everything went well. Now let’s verify our installation with flutter doctor. Go ahead and run below command on your new terminal window.
If everything went smoothly, you will see an output like a below. If you got into any trouble, put a comment below, so i can help you.
[Bonus] Create Test App and Run it on both iOS and Android Simulators
I made a short video which showing how to follow all the steps above including how to create your first test application and open it on both iOS and Android simulators to see it in action.
Thanks for reading. Happy Coding! 😊