- 1 Setting up Environment for Flutter
- 1.1 Setting up Flutter for MAC
- 1.2 Setting up Flutter on Windows
- 1.3 Setting up Flutter on Linux/Ubuntu
- 1.4 Common Installations
- 1.5 Run the project in Your Emulator
Setting up Environment for Flutter
This tutorial is geared towards setting up Flutter for Application development. Flutter is the latest news from Google, which is believed to be the next-gen problem solver in terms of cross-platform development. One language can build application across platforms. Flutter development is based on the Dart Language, and is based on AOT(Ahead of Time) compilation and contains a lot of other useful techniques to provide easy development of Apps.
In order to setup Flutter in your System, find the resource below. For optimal performance (Since the application will be running on emulators rather than a physical device for the most part), you will require good performing computers.
Any system with configuration equal to or above 4Gb RAM, 1TB memory and a good i3(7th gen) or more processor should do the business. You can find some good computers with the configuration here.
Setting up Flutter for MAC
If you are planning on developing applications for both Android and IOS, you will be in need of MAC(Since flutter is dependent on XCode to run the iPhone simulator). In case you don’t have a MAC for development, look at Setting up Flutter on Windows/Setting up Flutter on Ubuntu sections below. However, you will not be able to simulate an iPhone experience by any means.
To install Flutter in MacOs, you will require the following
- Disk Space: 700 MB (does not include disk space for IDE/tools).
- Tools: Flutter depends on these command-line tools being available in your environment.
All the above command line tools come pre-installed with MacOs. You can go ahead with the following steps if you have the required disk space for the Flutter SDK to reside.
Download Flutter SDK
Download the Flutter SDK from the following location
Flutter SDK Download
Once done, you will find that it is a ZIP folder. UnZip this folder, and copy its path.
You will have to set the environment path variable to point to this Flutter SDK folder by putting the following command into your terminal
Running Flutter Doctor
Now, the Flutter SDK is in the path. Time to run Flutter Doctor command to check what features are missing. When you run Flutter Doctor. It lists all the dependencies that are currently missing in the system.
Time to install all the required dependencies for IOS and Android development. We will in need of 2 tools. One is XCode which is an IOS native programming Application.
The second is Android Studio which is the Official development kit from Google in order to develop Android Apps. You will require both the Application along with the related dependencies to be in the system to go further.
Time to see how to Install XCode in MacOs. If your system is up to date with the latest release of MacOS, go to the below link.
Once the XCode 10 is downloaded, you can give permission for it to be installed in the system. This will install all the XCode and IOS specific dependencies.
In case you do not have the latest MacOS. Do not worry(XCode 10 can be downloaded with MacOS Mojave and above only). The Flutter SDK runs pretty much well with any XCode version above 9.0
You can download the older versions from the following link – Developer Tools IOS
You will, first of all, require a Developer Account, which you can create here. Once done, you will have unlimited access to all the developer tools to build, test, deploy anything related to IOS
Once the XCode is installed in your system, run the following command in the terminal. This will let the system know that there is the latest version of XCode present.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
This is the correct command for most of the system. In case you are going through step 2(Installing an older version of XCode), make sure to replace the XCode path with your current path where the XCode gets downloaded.
Setup IOS Simulator on Mac
This step is specific to MacOS only. Since this is not an open source operating system, you need to have a MacOS to develop IOS applications. The IOS simulator gets the same treatment as well. In order to check if the App you built simulates properly on an IOS device, you will require an IOS simulator to be installed.
You can search for the simulator in the MacOS by either checking the spotlight or running the following command in the system.
open -a Simulator
Running that command should pop open the simulator like below.
If the XCode is properly installed, this step should run without any issues. If the XCode is not installed properly, remove the XCode and restart the above step from scratch. It is better to not overload the system with unnecessary commands rather than starting everything from scratch.
Setting up Flutter on Windows
Setting up the SDK for Windows is pretty much simple. You do not have any XCode installation to be done. Since windows cannot be used for IOS development. In case you want to simulate the application on IOS, there are 3rd party simulators that are available. This can be used to create and deploy IOS apps. The accuracy, however, cannot be promised.
Let’s look at the requirements and Steps to include Flutter on Windows.
Once the Flutter SDK is downloaded and unzipped. Make sure to place it inside a Folder which does not require permission to access. For (Eg.) Do not place the Flutter folder inside C:>Program files, inside put it inside a folder like C:>src like shown below.
Update your Path to let the Environment know where the Flutter SDK resides. See the below steps to update your PATH variable.
Open up the Android Studio and navigate to File>Settings. Find the Plugins option on the left and search for Flutter. You might have to search in all repositories to find it.
Once it is found, click install and wait for Download. The Android Studio will require a restart. Perform the restart, and you IDE is ready with the plugin.
You can find a helpful video which Shows Flutter setup in Windows below
Setting up Flutter on Linux/Ubuntu
Installation in Ubuntu/Linux is similar to that of Mac. You still cannot install XCode or the native IOS simulator since it is restricted to an IOS environment only. The below step illustrates how to install the Flutter SDK to your system
Open a terminal and navigate to the download location. Perform Unzipping of the SDK.
tar xf ~/Downloads/flutter_linux_v1.0.0-stable.tar.xz
Once the bundle is unzipped, time to point the Path to the SDK folder. Use the command below to do that.
This will point the path to the Flutter SDK and its files. If you run Flutter Doctor now, it should show all the missing dependencies present.
Install Android Studio
Android Studio plays a major role in terms of developing the Flutter Application. It not only provides the IDE to create the App, but it also provides the required Android Emulator to test the Code in Android devices.
The Android Studio comes packed with required ADB and other related command line tools and does not require any external installation.
To know more about installing Android Studio for Mac/Windows, you can read the Setting up Android Studio for Application development post.
Once you are done, the Studio looks like below.
Open the App and find the preference tab. It is under Android Studio>Preferences
Once that is done, you can find the preferences tab with the plugins option on the left section.
Search for Flutter. You might have to try searching under Search all repositories to find that. Once done, choose the below option
Click Install and Restart Android Studio to let the Flutter SDK reflect in the Android Studio IDE.
The restart of the Android Studio now creates a New Tab to create the Flutter Projects. You can find this option in the Android Studio startup or once inside under File>New Flutter Project like below.
Time to see if the Flutter Project is working as expected. Continuing from the previous section, go ahead and create a Flutter Project.
The Following section opens up.
Choose the Flutter Application option, and the next section asks for the Flutter SDK location.
Remember the first step where the SDK was downloaded and placed in a location. You have to point the project to this location like below.
Once the project is created, you can find the project structure with both the Android and IOS project codebase like below.
Run the project in Your Emulator
Time to take the project for a spin. See what the default project is going to look like. In order to run the project in your environment, you will need to create start the emulators.
To run an Android emulator, do the following.
Navigate to Tools>AVD Manager
Create a new Virtual Device
Once the configuration downloads and the Virtual device builds. It is time to choose the AVD through the Android Studio.
Upon running the emulator, a new Android-like device opens up. Time to finally run our App on this emulator to see how the device app behaves.
Testing the application on an IOS Simulator looks like,
That’s it for this tutorial on how to set up your Environment to develop Flutter Applications.
You can check out the Post of Developing the first Flutter App using Android Studio post to start programming Simple and Easy Mobile Applications.
Drop in any comments below if any below.