Getting Started with Flutter on macOS

9 min readFeb 6, 2021

--

This article will walk you through detailed process for setting up and running Flutter apps on macOS both on iOS and Android.

System Requirements

Operating system : macOS 10.15 or higher (64-bit)
Disk space : 3GB (excluding disk space for IDE/Tools)
Tools : Git, Xcode, Android Studio, Visual Studio Code

Get Flutter SDK

Download the stable Flutter SDK .zip file from link given below https://flutter.dev/docs/get-started/install/macos
Unzip the file and move the folder named flutter from your Downloads folder to an ideal location to set it up permanently i.e., the Home directory.
Go to Home by using the keyboard shortcut Shift + CMD + H and create a new folder named Developer and move the flutter folder here.
Also, you can reach the Home directory from the Finder window.
Sidebar > Favourites > [folder_with_your_username] . Refer below image for reference.

Image highlights the ‘Home’ directory and it’s path

Now that you have moved the flutter SDK folder to a permanent location, we can continue to define a path variable.

Adding a PATH Variable

To run flutter commands in any of your terminal sessions, a permanent path variable must be added into the rc file of your shell.

Open Terminal window
Change to the directory where you placed the Flutter SDK folder (or) simply drag the flutter folder into the terminal window preceded with a cd command and run it.

Copy the PATH after ‘cd’ command to your clipboard for future use

Now open or create a rc file to add in the path variable for Flutter SDK. Typing echo $SHELL in your Terminal tells you which shell you’re using. If you’re using Bash, edit .bash_profile or .bashrc file. If you’re using Z shell, edit .zshrc file.
In my case, i’m using a zsh shell. Open a new terminal session, runvim .zshrc . If you are a bash shell user, run vim .bash_profile or vim .bashrc to enter inside a text editor where you will be adding the path variable.

‘vim [file_name]’ command opens a file with the specified [file_name] if it already exists or creates a new file

Hit I on keyboard to enter edit mode in vim editor. Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you hosted your Flutter SDK.

$ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

Your terminal should look something like this after adding your PATH variable

Now press ESC and type :wq! to save your rc file and quit the terminal.

Now open a new terminal session and run $ flutter --version command. This will check for the existing Flutter SDK folder and will download the Dart SDK.

Once done, your terminal window should appear something like this

Now run $ flutter doctor command to to see if there are any dependencies you need to install to complete the setup. Any errors or warnings will be fixed in the process followed furthur.

Downloads all the other packages needed and gives a detailed info on other tasks to be performed

Setting up Android Studio

Download the latest Android Studio .dmg file from the link given below: https://developer.android.com/studio
Opening the .dmg file prompts a setup wizard that installs all Android SDK, Platform and Build Tools required. Proceed by clicking ‘yes’ without changing the default settings and wait for the installation to complete.

Step 3 : Shows all the components that will be downloaded

Step 4 : Wizard isdownloading all the components required to complete the setup

Step 5 : Hit ‘Finish’ to complete the setup process

Now run Android Studio and install the Flutter and Dart plugins as shown below:

Select the Configure menu at bottom right and select Plugins . Search for Flutter plugin and install. It will also display a prompt to install Dart plugin. Allow for the installation and restart the IDE for the changes to take effect.
Now we need to accept Android Licences in-order to proceed further. We do this by running the following command:
$ flutter doctor --android-licences
and by entering y to every Accept prompt in the terminal, we will be done with accepting all the android licences.

Creating and Deploying App to Android Simulator

Follow below images with instructions to deploy a sample flutter app on to Android simulator.

**Step 1 :** Click ‘Create New Flutter Project’

**Step 2 :** Select ‘Flutter Application’ option as you are about to create a flutter app and click ‘Next’

**Step 3 :** You can give a custom name to your project. Also change the ‘Project Location’ to your choice and click ‘Next’

**Step 4 :** You can leave the package as it is for now as this is a sample app. If you are starting to build a real-time app, then make sure to give a proper package name which is usually the website of your organisation or app and click ‘Next’

**Step 5 :** You can see that your project is created and editor window in presented. You have no devices as of now to run the app as we have just installed our studio. So click on the ‘AVD Manager’ icon on the top right to add a virtual device

Step 6 : Click on ‘Create Virtual Device’

**Step 7 :** Select a device of your preference and click ‘Next’. Here i’m choosing ‘Pixel 4’

**Step 8 :** A ‘System Image’ must be selected which is usually the OS for your virtual device . Here i have selected ‘Pie’. Click ‘Next’

**Step 9 :** You will be prompted to accept terms and conditions inorder to download the System Image file. Check the ‘Accept’ radio button and click on ‘Next’

**Step 10 :** Wait for the installation to complete and click on ‘Finish’

**Step 11 :** You will be asked to select the System Image you downloaded. Select and click ‘Next’

**Step 12 :** You can add a custom name to the virtual device for better identification. Click ‘Finish’

**Step 13 :** Your virtual device is now created and you can run it by clicking on the play button shown

**Step 14 :** You can now see the simulator up and running

**Step 15 :** Use CTRL + R to run the app. You can see that is successfully installs and runs on the virtual device you have added.

The above sample app is a Counter app which on cliking the + button increments the count value and displays in on screen. It is provided as a started project by Flutter.

Setting up Xcode

Download the latest version of Xcode from the Mac App Store and complete the installation process.
It might ask you to agree with it terms and conditions. Simple agree all the prompts and you will be ready to start your development
Open Xcode. On initial launch, you will be asked for installation of some additional components and command line tools basing on the system configuration. Allow installation.
Now head to the menubar and click on Xcode > Preferences > Accounts or you can use the CMD + , keyboard shortcut to open the preference pane.
Add and sign-in with your apple account. This will be helpful when you want to run your Flutter app on to a real iPhone device.

Deploying App to iOS Devices

Source: flutter docs

To deploy your Flutter app to a physical iOS device you’ll need to set up physical device deployment in Xcode and an Apple Developer account. If your app is using Flutter plugins, you will also need the third-party CocoaPods dependency manager.

You can skip this step if your apps do not depend on Flutter plugins with native iOS code. Install and set up CocoaPods by running the following command $ sudo gem install cocoapods
Open the default Xcode workspace in your project by running open ios/Runner.xcworkspace in a terminal window from your Flutter project directory.
Select the device you intend to deploy to in the device drop-down menu next to the run button.
Select the Runner project in the left navigation panel.
In the Runner target settings page, make sure your Development Team is selected. The UI varies depending on your version of Xcode.

For Xcode 10, look under General > Signing > Team.
For Xcode 11 and newer, look under Signing & Capabilities > Team.

When you select a team, Xcode creates and downloads a Development Certificate, registers your device with your account, and creates and downloads a provisioning profile (if needed).

To start your first iOS development project, you might need to sign into Xcode with your Apple ID.

Development and testing is supported for any Apple ID. Enrolling in the Apple Developer Program is required to distribute your app to the App Store. For details about membership types, see Choosing a Membership.
The first time you use an attached physical device for iOS development, you need to trust both your Mac and the Development Certificate on that device. Select Trust in the dialog prompt when first connecting the iOS device to your Mac.

Then, go to the Settings app on the iOS device, select General > Device Management and trust your Certificate. For first time users, you may need to select General > Profiles > Device Management instead.
If automatic signing fails in Xcode, verify that the project’s General > Identity > Bundle Identifier value is unique.

Start your app by running flutter run or clicking the Run button in Xcode.

Create and Run a simple Flutter App

Open Terminal and change to the directory you wish to keep your project files.
Create a new Flutter app by running the following command.
$ flutter create [your_app_name]
A directory with [your_app_name] is created, containing Flutter’s starter app. Enter this directory.
$ cd [your_app_name]
Open simulator using the following command.
$ open -a Simulator
To run the app, use $ flutter run command.

Setting up Visual Studio Code Editor

Download the VSCode IDE from the link given below:
https://code.visualstudio.com/download
Open VSCode and click on the Extensions tab on the sidebar to the left.

Image highlighting the ‘Extensions’ tab option

Search for Flutter extension and click on install. It will also install the Dart extension which is bundled together.

Image highlighting the ‘Flutter’ extension

Why use VSCode Editor ?

It is efficient, convinient, lightweight editor that is equipped with all the tools related to code and run Flutter apps. It even has an integrated Command Line Interface (CLI) which helps running the same commands as in mac terminal.
Xcode cannot be used to code Flutter apps as it can’t be equipped with any plugins in-order to recognise Flutter or Dart code unlike Android Studio or Visual Studio Code. It can only be used to process the flow which delivers the app to App Store.
Android Studio can be used a default IDE, but it might put a heavy load on the CPU same as Xcode which will decrease efficiency and processing time (mentioning this with regard to low system configuration and storage). Instead it will be good to used Xcode or Android Studio whenever most necessary.
You can simply create a new project as shown in Create and Run a simple Flutter App section above and build your app using VS Code. No hassle launching Android Studio or Xcode is required to create a new project.
If you prefer to choose VS Code, i would like to suggest Material Icon Theme extension which gives a materialised look to the icons all over your project files which makes it easy to distinguish.