💻

Setting Up Flutter on Mac OS

Sep 21, 2024

Flutter Installation and Setup on Mac OS

Overview

  • Installation of Flutter on Mac OS
  • Creating a Flutter app in Android Studio
  • Running a Flutter app on Virtual Android Emulator and Virtual iOS Emulator

Step 1: Download Flutter SDK

  1. Open a web browser and search for "Flutter".
  2. Click on the link from docs.flutter.dev/get-started/install.
  3. Select Mac OS.
  4. Choose development option:
    • For iOS development: select iOS.
    • For Android development: select Android.
  5. Scroll down to find the Install Flutter SDK section.
    • Choose the zip file option for Apple silicon (M1, M2, etc.) or Intel.
    • Download the Flutter SDK zip file.

Step 2: Create Development Folder

  1. Open Terminal.
  2. Create a development folder in the home directory: mkdir development
  3. Change directory to Downloads and extract the Flutter zip file: unzip ~/Downloads/flutter_macos_<version>.zip -d ~/development
  4. Verify by checking the contents of the development folder: cd ~/development/ ls

Step 3: Set Flutter Path

  1. Open .zshrc file to add Flutter path: open ~/.zshrc
  2. Add the following line to the end of the file: export PATH="$HOME/development/flutter/bin:$PATH"
  3. Save and close the file.
  4. Restart the terminal and verify installation: flutter --version

Step 4: Install Xcode

  1. Open App Store and search for Xcode.
  2. Download the compatible version based on your macOS.
  3. Agree to license terms when prompted.
  4. Install additional components once Xcode opens.

Step 5: Install Android Studio

  1. Open a web browser and search for Android Studio.
  2. Click on the download link from developer.android.com.
  3. Agree to the terms and conditions and download the dmg file for Apple chip.
  4. Drag the Android Studio icon to the Applications folder.
  5. Launch Android Studio and follow the setup wizard:
    • Do not import settings.
    • Choose standard installation.
    • Accept all licenses.

Step 6: Install Flutter Plugin in Android Studio

  1. Open Android Studio and go to Plugins.
  2. Search for Flutter and install it (also installs Dart).
  3. Restart Android Studio after installation.

Step 7: Verify Setup with Flutter Doctor

  1. Open terminal: flutter doctor
  2. Check for issues and install missing components as indicated.
  3. Accept all necessary licenses: flutter doctor --android-license

Step 8: Create a New Flutter Project

  1. Open Android Studio and select New Flutter Project.
  2. Name your project (e.g., my_flutter_app).
  3. Ensure it follows the naming conventions (lowercase with underscores).
  4. Click Create.

Step 9: Run Flutter App

Running on Android Emulator

  1. Open the Android Emulator from the device options.
  2. Click the Run button in Android Studio.
  3. Wait for the app to launch in the emulator.

Running on iOS Simulator

  1. Open the iOS Simulator from the device options.
  2. Select the simulator (e.g., iPhone 14 Pro Max).
  3. Click the Run button in Android Studio.
  4. Wait for the app to launch in the iOS simulator.

Conclusion

  • Successfully set up Flutter for development on Mac OS.
  • Able to create and run a Flutter app on both Android and iOS emulators.