Home TutorialsFlutter Setting up Flutter on Mac

Setting up Flutter on Mac

by Atif Azad

Yesterday I did the Flutter setup on my Mac. It was not difficult but also not as simple as I was expecting it to be. Specially from the perspective of time, it was a very lengthy setup. In fact the complexity doesn’t lie with the Flutter setup itself but the environments it depends upon. As you know it is a cross-platform tool and lets you develop apps for iOS, Android and web with single code.

As I am on a Mac, setting up iOS development environment along with Xcode and command line tools was like playing at a home ground and that went all fluent except that downloading ~9GB Xcode obviously took long time. However, Android development environment setup was not a piece of cake.

Any ways, let’s take a look at the steps involved in setting up Flutter.

Install Flutter SDK

  1. Before installing Flutter check your system meets the minimum requirements.
  2. Download the stable release of Flutter SDK.
  3. Unzip the downloaded package and move it to your desired location.
  4. Add Flutter to your PATH variable. To add it permanently in your PATH, do the following…
    • Open your .bashrc or .zshrc (You’ll find it in your home directory. Create it if it doesn’t already exist.)
    • Add following line:
      export PATH="$PATH:[PATH_TO_FLUTTER_SDK]/flutter/bin"
      Replace [PATH_TO_FLUTTER_SDK] with the path where you placed Flutter in Step-3.
    • Run source $HOME/.<rc file>
    • Run echo $PATH.
      Verify that flutter/bin is in the output of above command. If yes, Flutter has been added to your path.
    • Run which flutter to verify that the flutter command is now available.

Setup your IDE (Visual Studio Code)

Although the official documentation says that you can use any IDE/Editor of your choice to develop apps with Flutter but they have documented the setup guidelines for Visual Studio Code, Android Studio and IntelliJ IDEs. I personally like Visual Studio Code so I am using it for Flutter development as well.

Install Visual Studio Code

  • If you don’t already have it, download and install Visual Studio Code.

Install Flutter Plugin

  • Run VS Code.
  • Open Extensions pane (press ⌘⇪X)
  • Search ‘Flutter’ in Extensions search box.
  • Select Flutter extension in the list and click install.
    This step will install Flutter extension and also Dart extension. Flutter uses Dart language therefore Dart extension gets installed automatically with Flutter extension.

Run Flutter Doctor

Flutter needs several dependencies to be installed. flutter doctor command helps in determining the missing dependencies.

  • Run flutter doctor command.
  • Look at the output. Depending on the softwares already installed on your system, it can complain or be satisfied for different components.
  • Follow the setup ahead based on the output of flutter doctor.

Install CocoaPods

CocoaPods is a project dependency management tool used by Xcode. Flutter needs it for iOS builds.

  • Run sudo gem install cocoapods.

Install Xcode and Command Line Tools

If not already installed…

  • Go to Appstore and install Xcode.
  • Open Xcode, it will prompt you to install the command-line tools so just go ahead with installation.

Verify iOS/Mac platform setup with Flutter Doctor

  • Run flutter doctor.
  • Make sure that the output mentions no issue related to Xcode.
  • If there is any issue, may be something went wrong in above steps.

Install Android SDK

Again, if you don’t already have Android SDK on your system or flutter doctor complains about something missing only then you’d need to follow this section.

The easiest way to install Android SDK is with installing Android Studio so you can follow following steps. If you don’t want to install Android Studio, you can follow Kyru’s article for that purpose on medium.com otherwise, please follow the steps below. 🙂

  • Download and install Android Studio.
  • Open Android Studio. Android Studio Setup Wizard will start. Follow all the steps which will install latest Android SDK, Platform-Tools and Build-Tools.

Run Flutter Doctor again to verify Android SDK setup

  • Run flutter doctor.
  • If output mentions no issues with Android SDK setup, all good.
  • You can ignore Android Studio related warning if you want to use VS Code as IDE otherwise you can follow the Flutter doctor’s advice and install Flutter and Dart plugin for Android Studio.
  • If there are issues, probably something went wrong during Android SDK setup above. Below, I’m listing how to fix the issues that I encountered and fixed.

Fix Error: Android license status unknown

In case Flutter doctor raises the issue ✗ Android license status unknown. follow following steps to fix it.

  • Run command flutter doctor --android-licenses.
  • It will go through all the unaccepted Android licenses and will ask for your acceptance one by one.
  • Accept all licenses.
  • Run flutter doctor again.
  • The should have gone now.

Fix Error: Android sdkmanager tool not found

In my case, probably some step during Android SDK installation didn’t went perfectly ok and the tools folder was missing under my Android SDK path which is usually ($HOME/Library/Android/sdk/tools/bin/sdkmanager). There should be a tools folder under sdkmanage folder.

Although the fix is simple, I had to spent quite much time in finding this out. If you also are facing this error, you can fix it by…

  • Download the tools folder right from the Android Studio download page. Scroll down until you see section ‘Command line tools only’
  • Extract the downloaded zip file, you’ll get tools folder.
  • Put the tools folder under the sdkmanager folder (generally the path is $HOME/Library/Android/sdk/tools/bin/sdkmanager)
  • Now run flutter doctor again, everything with Android SDK setup should be fine now!

Fix Error: A newer version of the Android SDK is required

Especially in case when you already have Android SDK installed on your machine, that might be outdated. In any case, if you get this error, you just have to…

  • Run command $HOME/Library/Android/sdk/tools/bin/sdkmanager --update.
  • If you have sdkmanager at some other path, please replace the above path with that path.

Setup Devices (Simulator/Emulator)

If you run flutter doctor, there should be only one unaddressed issue now which is the warning ! No devices available.

Run an iOS Simulator

  • Run command open -a Simulator in terminal. This will open an iOS simulator.

Run an Android Emulator

If you run both or one of the iOS simulator and Android emulator (AVD), the warning ! No devices available will go away. To see the list of connected devices, run following command in Terminal.
flutter devices

Verify the Flutter Setup

To verify the complete Flutter setup, let’s create our first Flutter app.

Create a Flutter app

  • In VS Code, open the Command Palette (From menu View -> Command Palette or press ⌘⇪P)
Visual Studio Code - Command Palette: Create new Flutter project
  • Type ‘flutter’ and select ‘Flutter: New Project’ command.
  • Enter your project name.
  • Select the parent folder for your project.
  • Wait for the project creation until the file main.dart appears.

Run the app

  • Choose the target device from bottom right.
Visual Studio Code - Target Device. Select in bottom bar (right corner)
  • Press F5 or select from menu Debug -> Start Debugging.
  • Wait a few moments.
  • The application will start (in debug mode) in the selected device/simulator.
flutter app running on ios simulator
iOS Simulator
flutter app running on android emulator
Android Emulator

Congratulations! You have successfully run your test app and your setup is complete for starting your first cross platform production scale app. Good luck! ✌️

What’s next

Start building cross platform Flutter apps with establishing a clear understanding by building a clean structure with a stateful single view app.

0 0 votes
Article Rating

You may also like

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy
0
Would love your thoughts, please comment.x
()
x