logo.png

Install Flutter - Mac

Thursday, October 24, 2024

Articles/Install Flutter - Mac

How to install Flutter on Mac

1. Install Flutter

Verify your shell configuration

1. To verify zsh was set as default macOS shell, run the Directory Services command line utility.

  • Pro Tip: How to find your default shell

     dscl . -read ~/ UserShell

The command should print the following as its response.

     UserShell: /bin/zsh

You can skip the remaining steps.

2. If you need to install zsh, follow the procedure in this Wiki

3. If you need to change your default shell to zsh, run the chsh command.

     chsh -s `which zsh`

To learn more about macOS and zsh, check out Use zsh as the default shell on your Mac in the macOS documentation.

Rosetta 2

  • Pro Tip: How to find your current Mac chip

1. To check your Mac's chip, click the Apple logo, select About This Mac, and look for the Chip section. You'll see if it's an Apple Silicon or Intel chip.

2. Some Flutter components require the Rosetta 2 translation process on Macs running Apple silicon. To run all Flutter components on Apple silicon, install Rosetta 2.

     sudo softwareupdate --install-rosetta --agree-to-license

Download Flutter SDK

1. Go to Set up Flutter, scroll to the Install the Flutter SDK section, and download the Flutter SDK (blue buttons) for either your Intel processor or Apple Silicon chip.


2. Create a folder where you can install Flutter. Consider creating a directory at ~/Development/.

3. Extract the file into the directory you want to store the Flutter SDK

When finished, the Flutter SDK should be in the ~/Development/flutter directory.

Add Flutter to your PATH

1. Go to your computer's home directory, as shown in the image below, next to my computer name (macBook), there's a little home icon. This is where you'll edit the .zshenv file. If you don't have it, create one ~/.zshenv.

  • Pro Tip: Order of execution (Zsh & Bash)

2. Some tutorials on YouTube will tell you to put this in a .zshrc file, but as the Google Flutter documentation states, it's better to put it in the .zshenv. You can refer to this picture to see the order of execution.

3. Copy the following line and paste it at the end of your ~/.zshenv file.

     export PATH=$HOME/Development/flutter/bin:$PATH

4. Save your ~/.zshenv file.

5. To apply this change, restart all open terminal sessions.

6. Run this command to check if the Flutter path was successfully set up.

     flutter doctor

If you use another shell, check out this tutorial on setting your PATH.

2. Install Xcode

Xcode set up

1. Install Xcode from the App Store

​2. Select the iOS checkbox; you need this to enable the simulator.

If you want to connect to a physical device, just follow the instructions in the Set up your target physical iOS device section on flutter.dev.

3. In Xcode's settings, under the Locations tab, ensure that the Command Line Tools option is selected. It may not be set automatically, so it’s a good idea to verify this.

4. Run this command to check the full Flutter installation progress.

     flutter doctor

CocoaPods

  • Why did the developer break up with CocoaPods? 
    Because it just couldn't stop adding dependencies to their relationship!

1. Install CocoaPods

     sudo gem install cocoapods

Yes, it might take up to 3 minutes for anything to happen in your terminal. If you’re lucky, everything will work fine. If your Ruby version is too old, you might get the annoying "Error installing CocoaPods." Don’t worry if that happens; I’ll show you what to do next.

You can skip the remaining steps if everything works.

  • ERROR: Error installing cocoapods:

2. Install Homebrew — we'll need it to install CocoaPods. Trust me, it's the easiest way to do it.

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Let's follow the instructions and run these three lines. 

     echo >> /Users/macbook/.zprofile

     echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/macbook/.zprofile

     eval "$(/opt/homebrew/bin/brew shellenv)"

3. Install ruby

     brew install ruby

Let's follow the instructions and run this line. This will set the new Ruby version as the default.

     echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc

4. Install cocoapods

​Now that we have the latest version of Ruby, we can install CocoaPods using Homebrew. First, we'll uninstall any old versions of      CocoaPods, if present, and then we'll install CocoaPods with Homebrew.

     sudo gem uninstall cocoapods

     brew install cocoapods

5. Run this command to check the full Flutter installation progress.

     flutter doctor

3. Install Android Studio

Android Studio set up

1. Install Android Studio

2. Go to Settings, then under Languages & Frameworks, select Android SDK, and in the SDK Tools section, choose Android SDK Command-line Tools (latest).

Android licenses

1. Accept the Android licenses

     flutter doctor --android-licenses

2. Run this command to check the full Flutter installation progress.

     flutter doctor

Flutter Plugin

1. Add the Flutter Plugin

2. Start the Flutter App

4. Install VS Code

Visual Studio Code set up

Flutter extension

1. The Flutter extension

​2. Start the Futter App

5. The Matrix

Auto const

  • Pro Tip: Save time with automatic const insertion!

With Flutter, you often have to write "const" a billion times. However, you can simply add these lines of code, and all the "const" keywords will magically be added for you when you save. Trust me, you will save so much time and hassle.

1. This only works in Visual Studio Code.

2. Press Ctrl + P and search for the settings.json file.

3. Add this line of code there:

     "editor.codeActionsOnSave": {
            "source.fixAll": true
     }

The Best Way to Start a Flutter Project

  • Pro Tip: Save time when it’s time to publish your app! - Start the right way!

There are multiple ways to start a Flutter project, from Android Studio to VSCode, but the best way is through the terminal. The `--org` option will automatically set up your Android `applicationId` and iOS `PRODUCT_BUNDLE_IDENTIFIER`. This is especially useful if you plan to release your app, as it will save you a lot of time during the release process.

To do this, navigate to your Flutter project in the terminal. I like to keep mine in `Development/projects`, then run the following command. Make sure to replace the placeholders with your project name and your website in reverse.

     flutter create --org com.yourdomain your_app_name

Flutter Made 10x Easier

Congrats, dear Padawan! You have a choice: take the blue pill and struggle through Flutter’s learning curve, or take the red pill, watch our YouTube video on how to learn Flutter in 1 hour, and 10x your progress. The choice is yours!