AppDividend
Latest Code Tutorials

How To Install Flutter On Mac

1 290

Get real time updates directly on you device, subscribe now.

In this tutorial, we will see How To Install Flutter On Mac.  Flutter allows us to make build beautiful native apps on iOS and Android from the single codebase. Flutter’s widgets architecture incorporates all the critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android devices. Flutter’s hot reload helps us quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing the state, on emulators, simulators, and hardware for iOS and Android. Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth, natural scrolling, and platform awareness.

We are using Flutter 1.0 for this installation demo. So let us see How To Install Flutter On Mac.

How To Install Flutter On Mac

If we want to install and run the Flutter then our development environment must meet these following minimum requirements.

  • Operating Systems: macOS (64-bit)
  • 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.
    • bashmkdirrmgitcurlunzipwhich

Step 1: Get the Flutter SDK

You can download the Flutter SDK from here.

Now, you need to unzip that package. You can move that unzipped folder to the project where you save all the other project folders or stay wherever it was.

Next step is to configure the System Path for flutter. To do that, you need to add the flutter path to the environment variables.

So, open the .bash_profile or .zshrc file and add the following kind of path to it.

export PATH=$PATH:/home/krunal/Desktop/code/flutter/bin

See, here the above path is mine and yours might be different. So add the correct path according to your folder structures. Save the file and exit.

Step 2: Run the Flutter Doctor

You can check out where the Flutter has the correct path or not by typing the following command.

which flutter

 

How To Install Flutter On Mac

So, here It is showing me the right path. Now run the following command.

flutter doctor

You will see something like this.

 

Install Flutter Example

Above command checks your environment and displays the report to a terminal window. The Dart SDK is bundled with a Flutter; it is not necessary to install the Dart separately. Check the output carefully for other software you may need to install or further tasks to perform the complete installation.

Step 3: Android Setup

Right now, the current version of Android Studio is 3.2. Flutter relies on the full installation of Android Studio to supply its Android platform dependencies. However, you can also write your Flutter apps in some editors like I am using Visual Studio Code. But, we need the android studio to create android virtual devices and some other dependencies.

Install Android Studio

  1. Download and install Android Studio.
  2. Start the Android Studio, and go through the ‘Android Studio Setup Wizard.’ This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by the Flutter when developing a Flutter App for Android. If you have already installed then update it to the latest version as well as all the other sdks.

Set up the Android emulator

Related Posts
1 of 3

Now, to run and test your Flutter app on the Android emulator, follow these steps.

  1. Enable VM acceleration on your machine.
  2. Launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Androidsubmenu is only present when inside an Android project.)
  3. Choose a device definition and choose Next.
  4. Select one or more system images for the Android versions you want to emulate, and select Next. An x86or x86_64 image is recommended.
  5. Under Emulated Performance, select Hardware – GLES 2.0 to enable hardware acceleration.
  6. Verify the AVD configuration is correct, and select Finish. For details on the above steps, see Managing AVDs.
  7. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Step 4: IOS Setup

If we  want to develop Flutter apps for iOS, you need a Mac with Xcode 9.0 or newer. I am using XCode 10.1

Set up the iOS simulator

We can prepare to run and test your Flutter app on the iOS simulator by following these steps:

  1. On your Mac, find the Simulator via Spotlight or by using the following command:
    open -a Simulator
  2. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.
  3. Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the Window > Scale menu in the simulator.

Step 5: Create a new Flutter Project

As I have previously told, I am using Visual Studio Code for this project. I would like to open it and create a new project from Visual Studio Code. Now follow the steps in Visual Studio Code.

  1. Invoke View > Command Palette.
  2. Type “flutter”, and select the Flutter: New Project.
  3. Enter a project name, such as app, and press Enter.
  4. Create or select the parent directory for the new project folder.
  5. Wait for project creation to complete and the main.dart file to appear.

It will take you the file system where you can create a project folder, and that is it rest will do by the editor, and it will create a brand new project.

 

Create a new Flutter Project

Now go to the root of the project inside your terminal and type the following command.

flutter run

I have open the both Android and iOS Simulators. So it looks like this.

 

Flutter iOS and Android Projects

Finally, How To Install Flutter On Mac tutorial is over.

1 Comment
  1. El Hadji Médoune Cissé says

    When do you want to do tutorial on installation flutter on windows ???

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.