Installing Flutter in MacOS

Installing Flutter in MacOS

What is Flutter?

Flutter is an open source framework made by Google. It enables a developer to create native cross-platform apps from a single codebase. This means that you can develop Android, iOS, Web, and Desktop apps at the same time in a single codebase. Flutter is mainly used for developing mobile apps but its use can be extended to developing web and desktop apps.

Flutter Installation

Important: If you’re installing on Apple Silicon (M1 Chips and M2 Chips), you need to have the Rosetta translation environment. You can install this manually by running:

sudo softwareupdate --install-rosetta --agree-to-license
  1. Download the Flutter SDK from the installation page. If your mac uses M1 or M2 related chips, download the Apple Silicon version. However, if your mac uses Intel x86 chips, download the Intel version.
  1. Extract the files to your Documents folder; it should be located in /Users/YourUsername/Documents.

Update your Path

  1. Open your terminal and run the following command to determine whether you're using bash or zsh:
echo $0
  1. If the output is bash, add flutter to your path by running the following command:
echo 'export PATH="$PATH:$HOME/Documents/flutter/bin"' >> .bashrc
  1. If the output is zsh, add flutter to your path by running the following command:
echo 'export PATH="$PATH:$HOME/Documents/flutter/bin"' >> .zshrc

Verifying the Configuration

We have to make sure that Flutter has been configured correctly.

  1. Open a new terminal (Make sure you open a new terminal after adding Flutter to your PATH)
  2. Run flutter doctor in your terminal.

If the command successfully runs, it will look similar to this:

Android Setup

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.
  3. Run flutter doctor to confirm that Flutter has located your installation of Android Studio. If Flutter cannot locate it, run flutter config --android-studio-dir <directory> to set the directory that Android Studio is installed to.

Android Virtual Emulator Setup

  1. Enable VM acceleration on your machine.
  2. Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device.
  3. In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
  4. If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device.
  5. Choose a device definition and select Next.
  6. Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
  7. Under Emulated Performance, select Hardware - GLES 2.0 to enable hardware acceleration.
  8. Verify the AVD configuration is correct, and select Finish.

For details on the above steps, see Managing AVDs.

Agree to Android Licenses

  1. Run flutter doctor --android-licenses to agree to the licenses
  2. Type y for every license agreement that shows up
  3. If it shows an error, you have to install the android sdk command line tools
  4. Open Android Studio, click on More Actions > SDK Manager > SDK Tools and click on the command-line tools checkbox.
  5. Click Apply and wait for it to install.
  6. Run flutter doctor --android-licenses to agree to the licenses

VS Code Setup

  1. Download and install VS Code
  2. Once it is opened, open the extensions tab and install the Flutter extension
  3. Open the Command Palette by pressing Ctrl + Shift + P.
  4. Type New Project and select Flutter: New Project
  5. Select Application and type any project name
  6. Select a folder to create the project in and you're ready to go!