How to Install Flutter on a Mac and set PATH variable

Category: Misc
How to Install Flutter on a Mac and set PATH variable

Google has surprised mobile developers all over the globe by putting out Flutter. Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time.

There’s no need to say that we are all excited and willing to test, play and develop amazing applications with Flutter SDK. In order to get everything ready we need to go through some installation and setup to get our development environment ready.

Some parts of installation process might be obscure for some of us and this article will try to shed some light on the installation process. This article mostly describes setting PATH variable permanent for Flutter SDK.

In order to get Flutter SDK on your Mac you need to download/clone a repository from GitHub:

git clone -b beta https://github.com/flutter/flutter.git

When the download process is over as a next step official guide tells us to set your PATH variable temporarily, for the current terminal window. You can do that. But let’s set our variable permanently.

The reason behind this is that you might want to have flutter available globally and on every new terminal session. The other reason, at least for me was - I wasn’t able to create new Flutter project through VS Code simply because it couldn’t locate the SDK. Updating PATH variable solved the problem.

First let’s find the folder where Flutter has been downloaded. In my case flutter downloaded directly into my user root folder. So if you navigate to /Users/YOURNAME most likely you will find your flutter folder there. If you changed directory before cloning the repository Flutter will be located in a respective folder.

We need to set our path in a special file called .bash_profile. I created this file in my user’s root directory. In your terminal window enter following command touch .bash_profile.

WHY BASH? Traditionally, when you log into a Unix system, the system would start one program for you. That program is a shell, i.e., a program designed to start other programs. It's a command line shell: you start another program by typing its name. The default shell, a Bourne shell, reads commands from ~/.profile when it is invoked as the login shell.

Bash is a Bourne-like shell. It reads commands from ~/.bash_profile when it is invoked as the login shell, and if that file doesn't exist¹, it tries reading ~/.profile instead. Read more on StackExchange.

Now that we have .bash_profile file we can add the path to our flutter folder in there by editing it with nano editor which is a text editor for Unix-like computing systems or operating environments using a command line interface. In your terminal window type sudo nano .bash_profile. (Make sure that you are in the same directory where you created the file itself. In my case I was always in the same folder /Users/[MYUSERNAME]).

You will be presented with the following window:

Other paths that might have been set for you or by you previously will be found here and we have to add the path for Flutter. Flutter right now is located inside /Users/[MYUSERNAME] directory. In order not to face flutter SDK folder every time I’m going to my documents folder and not to delete it by chance I moved my Flutter folder outside /Users/ folder. Just cut and paste.

Now that our Flutter folder is in place let’s add a $PATH to it as show on the screenshot above export PATH=/flutter/bin:$PATH. To save changes and exit nano editor hit control+X then hit Y and RETURN keys.

Everything should be in place. Just to make sure that everything has been changed run source $HOME/.bash_profile to refresh the current window and verify that the flutter/bin directory is now in your PATH by running echo $PATH.

NOTE: It’s up to you where you want to put Flutter folder. You need to update the path accordingly. If you put $HOME/flutter/bin:$PATH it will assume that your folder is in /Users/[MYUSERNAME]/flutter.

If you have followed this article from the beginning and haven’t run flutter doctor command yet, do it! It will see if there are any dependencies you need to install to complete the setup. This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. So far so good!

Don’t panic if you see a huge report displayed in the terminal window. Most likely you will need to do some minor installations. Everything will be detailed pretty well so you won’t have any issues. In my case I had to finish installation of Xcode and tools, cocoapods etc. Here’s a screenshot of my terminal window:

Flutter Doctor command environment $PATH

Let’s set up our editor. I’m going to use Visual Studio Code. After installing VS Code you need to install a plugin for VS Code. As soon as you install Dart Code plugin you are ready to go.

Hit CMD + Shift + P and in the Command Palette type Flutter: New… and create new project. In order to run the project on an iOS device start Simulator (simply type Simulator in Spotlight) and then in the VS Code go to menu Debug -> Start Debugging and enjoy!

Conclusion

It took a little bit of hustle for me to set path to Flutter and as always, I hope you found this article helpful. In case of any trouble please contact my by email or on Twitter and don’t forget to follow me for new articles on iOS development and amazing Flutter related stuff. Enjoy!