A Flutter sample app that shows the end product of the Cloud Nex. How to install and setup Flutter on Mac - Part 1 In this series, we introduce you to the joys of working with Flutter and Dart to build iOS and Android apps. All software we’ll be using is free to download and install. Although you can build iOS apps on a Windows computer with Flutter, if you want to test it, you will need a Mac. Welcome to the Complete Flutter App Development Bootcamp with Dart – created in collaboration with the Google Flutter team. Section 15 – Flutter App – Build a Flutter Tip Calculator App. Section 16 – Flutter App – Build a Quiz App – Learn more about Flutter Widgets. Section 17 – Flutter Intermediate Concepts – Navigation and Build a Full Movie App: Learn how to navigate to different routes/screens and passing data between them. At the end of the.
Below is just about everything you need to do to install Flutter on your Mac OS machine.
What follows is a list of the prerequisites necessary to install Flutter on your machine. If you have everything already installed and ready to go you can safely skip this section, otherwise follow along our step by step instructions on how to get everything set up.
What you’re going to need:
Homebrew is the first thing every developer should install on their Mac. As their creators state brew is the missing package manager for Mac OSX. To install homebrew on your machine open your Terminal.app and paste
/usr/bin/ruby -e '$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)'.
You can install git through brew. Run
brew install git to install git.
You don’t necessarely need to install tools for both iOS and Andoid if you plan to only develop for one platform, but since Flutter explicetely targets cross platform development it’s where it shines.
If you decide to install only one platform remember that you can always come back and install the other platform later on.
If you plan to build for iOS devices you also need to install the development environment to build applications for your target platform.
Download Xcode from Apple’s website and Install it.
Unzip the file and open it proceeding through all the steps of the configuration wizard. Once opened, make sure the developer tools for the command line are installed by opening a Terminal window and running
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer. Also accept Apple’s license agreement by running
With Xcode open press ⌘P, or open the Preferences screen. Navigate to Accounts and add you Apple account to the empty list, you will need it to generate a Developer Certificate and Provisioning Profile to run and sign your applications.
Xcode should have already created a few default simulators for you, you can check which simulators you have installed by opening Xcode and going to View > …
You can also check it by opening the Terminal and running `open -a Simulator.app’.
To test if everything is setup correctly create a new iOS application, we will delete it as soon as we confirm that everything works as expected. Select the Language as Swift and leave everything else turned off. Press ⌘R to run the application, it should open the default simulator and run the App.
The Simulator is working! You can now close the Simulator and Xcode and delete the placeholder project.
If you plan to build for Android devices you also need to install the development environment to build applications for your target platform.
Download Android Studio from Google’s website and Install it.
Android Studio has already installed most of what you need, you just need to go to Preferences SDK and download the SDK for the version of Android you want to support (this would mostly depend on the free space on your HDD/SSD). I would recommend to at least download the latest 2 versions (not including betas).
Before you can run an Android application on your Mac you need to install an emulator using AVD Manager included in Android Studio.
Create a new Android Project (it will be a placeholder that we’ll delete as soon as we finish the setup), if it asks for the language select Java. On the bottom bar you will get notifications on the build status. If something is missing Android Studio will automatically offer to download it, download everything that is needed to run the application.
From the menubar open Tools > Android > AVD Manager and click on “Create Virtual Device”. Choose a name for the device and select the latest version of the Android SDK you have installed on the local machine.
After everything has downloaded and the emulator is setup open it to confirm it runs correctly by pressing on the run button from the main screen of any Android Studio projects.
The Emulator is working! You can now close the Emulator and Android Studio and delete the placeholder project.
You can install Flutter through brew as well, this has the advantage of preserving the ability to automatically update to a newest version when available.
brew install flutter
Follow the next steps to test your Flutter installation and make sure that it’s working properly before proceeding.
You need to configure the PATH variable to be able to call Flutter as
flutter, otherwise it will say that Flutter is not a recognized command. For this tutorial we’re assuming you’re using the default (bash), if you installed something custom (for example zsh) you need to use the file that corresponds to the “bash_profile” for your installation.
Open your “bashprofile” from your User’s directory in your editor of choice or run `nano ~/.bashprofile` to edit it directly from the Terminal.
Add at the end of the file:
It is possible that Android Studio didn’t automatically setup the PATH for the android SDK. Check the file for any string that includes “ANDROID”. If there isn’t any, or if the Flutter Android integration is not working even thought there is one, you might want to also add
while commenting out the existing one. You can comment by prepending the line with ”#“.
You can test if this fixed your installation and if it didn’t you can simply remove these 3 lines and uncomment the line you just commented to go back to the previous configuration.
Finally before testing anything reload the current session by running
source ~/.bash_profile in the Terminal.
flutter --version and you should get back the version number.
After you finish installing everything you can test if everything works properly by running
Flutter Doctor is a powerful tool, you should use it every once in a while - for example after major updates to either Flutter itself or its components (Xcode/Android Studio) are updated.
If you have connected a device, but you don’t see anything check the section on how to configure a device for Android and for iOS in “Running your Application”.
If you already have an editor setup you can skip this phase, otherwise we’ll show you how to install and configure Visual Studio Code to run and debug Flutter applications effectively.
You can download Visual Studio Code from Microsoft.
Unzip the downloaded file and install it.
Open it and get familiar with the interface. The beauty of VSCode is that is based on Extensions so you can use it with any language and any framework with the right Extensions installed. It also integrates really well with both git and debugging tool. For example you can debug your Flutter apps with breakpoints and everything from inside VSCode. In that sense it is more of an IDE than a simple Text Editor.
The only extension needed for Flutter is called “Flutter”. You can install it by opening Visual Studio Code and pressing on the cog in the bottom left of the screeen and selecting “Extensions”. Type “Flutter” in the Search Box and select the result by the author “Dart Code” (it should be the first result). Installing Flutter will also include Dart language support.
Once installed you can load it by pressing on “Reload the Editor” and the extension will be active without having to close and reopen VSCode.
You can run the application by typing
flutter run in the Terminal.
If you’re using Visual Studio Code you can also use the command palette by pressing ⇧⌘P and type “Flutter” to get a list of all the commands available.
You can select which simulator/emulator you want to run your app on by using VSCode command palette. After pressing run you will be shown a list of all the available devices and you can click or press a number to select which one you want to launch your application on.
After making sure that Xcode is properly installed and configured, open up the simulator
open -a Simulator. With the simulator open run the app with
Run the application with
flutter run, VSCode will open the Simulator for you.
You can check which devices you have connected to your Mac that are visible to Flutter by running
For iOS devices you might need to install some additional components from brew if it doesn’t want to launch.
On Android it works out of the box, assuming you have added the correct path to the Android sdk to your “bash_profile”.