DEV Community

Ruby Chu
Ruby Chu

Posted on • Edited on

Install Flutter on macOS Apple Silicon

#flutter #homebrew #mobile #ios

What do you need to do?

  • Download Google Chrome (as most people have it on their laptop, so I’ll skip this)
  • Download Flutter SDK
  • Download VS Code
  • Download Xcode
  • Download Android Studio

Download Flutter SDK 

# Go to your users folder on mac
$ cd /Users/your_mac_username
# You can name folder to other than "Developement". 
# This is just my suggestion.
$ mkdir Development
Enter fullscreen mode Exit fullscreen mode
  • Move the flutter zip to this folder, then unzip it (Once unzipped, you can trash that)
  • Don’t remove this Flutter folder as long as you’re still developing with Flutter ~ Your Mac needs this!

Setup Flutter Path

  • What is the path? Why do we need to set it up? See here.
  • Create a ~/.zshenv file on your computer 
# Create a zsh environment
$ create'~/.zshenv'
Enter fullscreen mode Exit fullscreen mode
  • Run this line to edit this file 
# This will let you edit your `zshenv` file
$ vim ~/.zshenv
# Press i on your keyboard to enable editing mode
Enter fullscreen mode Exit fullscreen mode
  • Paste this line in the file 
export PATH=$HOME/Development/flutter_3.22.0/bin:$PATH
# Press esc on your keyboard to close editing mode
# Type :wq (press one key at a time) to quit editing page
# Press enter on your keyboard
Enter fullscreen mode Exit fullscreen mode
  • Run this line 
# This refreshes the zsh environment
$ exec $SHELL
Enter fullscreen mode Exit fullscreen mode

Install Homebrew

  • Open the terminal and run this 
$ /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
Enter fullscreen mode Exit fullscreen mode

Install iTerm2 (Optional)

This is to make the Terminal easier to read.
I highly recommend doing this if you're new to software development.

brew install iterm2
Enter fullscreen mode Exit fullscreen mode
  • add iTerm2 to your zsh shell environment 
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/rubyc/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"
Enter fullscreen mode Exit fullscreen mode
  • Run this command on the terminal 
$ exec $SHELL
Enter fullscreen mode Exit fullscreen mode

Setup Xcode & License

If using MacBook Apple Silicon, you need to run this line. For MacBook with Intel, you can skip this line.

$ sudo softwareupdate --install-rosetta --agree-to-license
Enter fullscreen mode Exit fullscreen mode
  • Run these 2 lines to complete the Xcode license & setup 
$ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

$ sudo xcodebuild -license
Enter fullscreen mode Exit fullscreen mode

Install rbenv (Ruby version manager)

In the next section, when installing Cocoapods, you'll need Ruby setup on your MacBook. Although MacBook, by default, comes with Ruby installed, the Ruby version is old.

Installing Cocoapods will require a higher Ruby version. You'll learn how to update it in the section after this.

$ brew install rbenv
Enter fullscreen mode Exit fullscreen mode
  • Run this line to edit ~/.zshrc file 
$ vim ~/.zshenv
Enter fullscreen mode Exit fullscreen mode
  • If you don’t have this file on your computer, run this to create it 
$ create'~/.zshrc'
Enter fullscreen mode Exit fullscreen mode
  • Open ~/.zshrc and add these 2 lines 
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
Enter fullscreen mode Exit fullscreen mode
  • Run this command on the terminal 
$ exec $SHELL
Enter fullscreen mode Exit fullscreen mode
  • Upgrade Ruby version on MacBook
  • Check the Ruby versions that can be installed (only stable versions are displayed) 
$ rbenv install -l
Enter fullscreen mode Exit fullscreen mode
  • Install Ruby with the specified version.$ rbenv install 3.2.2 
$ rbenv install 3.2.2
Enter fullscreen mode Exit fullscreen mode
  • Change Ruby version for Global env 
$ rbenv global 3.2.2
Enter fullscreen mode Exit fullscreen mode
  • Check Ruby version 
$ rbenv version
# Expected Return output (your version may be higher than mine)
>> 3.2.2 ( set by / home / account /. rbenv / version )
Enter fullscreen mode Exit fullscreen mode
  • Check the Ruby version on your computer. If the output is the same as below, it means good to go to the next step. 
$ ruby -v
# Expected output
>> ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin23]
Enter fullscreen mode Exit fullscreen mode

Android SDK Manager Install

  • Open Android Studio
  • Go to Settings >> Search sdk >> Select Android SDK
  • Go to SDK Tools Tab
  • Download and select Android SDK Command-line Tools (latest)
  • Click Apply, and wait for the download to be finish
  • Then, you can run this 
$ flutter doctor --android-licenses
Enter fullscreen mode Exit fullscreen mode

Check Development Setup

Xcode Useful Tools (Optional)

  • DB Browser for SQLite (Visualize CoreData DB) 
$ brew install --cask db-browser-for-sqlite
Enter fullscreen mode Exit fullscreen mode
  • Xcodes (manage Xcode versions on Mac) 
$ brew install --cask xcodes
Enter fullscreen mode Exit fullscreen mode

References

Flutter Official Installation Doc

Ruby Installations

Homebrew, iTerms & oh-my-zsh Installation

Android Studio SDK Manager

Top comments (1)

Collapse
 
randalschwartz profile image
Randal L. Schwartz •

In your first code snippet, mkdr should be mkdir. I didn't look at the rest.

Read next

utkarsh4517 profile image

The Practical Hands-On Guide to Flutter Isolates

Utkarsh Shrivastava -

davidwilliam_ profile image

React native or Flutter ?

David William Da Costa -

betoflakes profile image

Registro 004-1. Domina Flutter con Clean Architecture: Integración de Supabase y Repositorios Simplificada

JR Saucedo -

ajmal_hasan profile image

React Native: Multi-Environment/Flavor Setup (App Icon, App Name, GoogleService.json) for Android [Latest] - 1

Ajmal Hasan -