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.
- Before installing Flutter check your system meets the minimum requirements.
- Download the stable release of Flutter SDK.
- Unzip the downloaded package and move it to your desired location.
- Add Flutter to your PATH variable. To add it permanently in your PATH, do the following…
- Open your
.zshrc(You’ll find it in your home directory. Create it if it doesn’t already exist.)
- Add following line:
Replace [PATH_TO_FLUTTER_SDK] with the path where you placed Flutter in Step-3.
source $HOME/.<rc file>
flutter/binis in the output of above command. If yes, Flutter has been added to your path.
which flutterto verify that the
fluttercommand is now available.
- Open your
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.
Flutter needs several dependencies to be installed.
flutter doctor command helps in determining the missing dependencies.
- 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
CocoaPods is a project dependency management tool used by Xcode. Flutter needs it for iOS builds.
sudo gem install cocoapods.
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
- Make sure that the output mentions no issue related to Xcode.
- If there is any issue, may be something went wrong in above steps.
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
- 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.
- 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
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
- Put the
toolsfolder under the
sdkmanagerfolder (generally the path is
- Now run
flutter doctoragain, 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
- If you have
sdkmanagerat some other path, please replace the above path with that path.
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 Simulatorin terminal. This will open an iOS simulator.
Run an Android Emulator
- Create a new AVD (Android Virtual Device) and run it.
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.
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)
- 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
Run the app
- Choose the target device from bottom right.
- 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.
Congratulations! You have successfully run your test app and your setup is complete for starting your first cross platform production scale app. Good luck! ✌️
Start building cross platform Flutter apps with establishing a clear understanding by building a clean structure with a stateful single view app.