DEV Community

Cover image for Flutter Installation and Environment Setup Guide
Sudara Sachindana
Sudara Sachindana

Posted on

Flutter Installation and Environment Setup Guide

System Requirements

Before you begin, ensure your system meets the following requirements:
  • Operating System: Windows, macOS, or Linux (64-bit)
  • Disk Space: 1.64 GB (does not include disk space for IDE/tools)
  • Tools: Git for Windows

1. Install Flutter SDK

Step 1: Download Flutter SDK

  1. Open your web browser and visit the Flutter website: https://flutter.dev/docs/get-started/install.
  2. Select your operating system (Windows, macOS, Linux, or ChromeOS).
  3. Download the Flutter SDK for your platform.

Step 2: Extract Flutter SDK

  1. Locate the downloaded file.
  2. Extract it to your preferred location:
    • Windows: Extract to C:\src\flutter (or another location).
    • macOS/Linux: Extract to ~/development/flutter.

Step 3: Add Flutter to PATH

  1. Update your system's PATH to include the Flutter SDK's bin directory.

    • Windows:
      • Open the Start menu and search for "Environment Variables."
      • Under "System Variables," find "Path" and click "Edit."
      • Add C:\src\flutter\bin to the list.
    • macOS/Linux:
      • Open a terminal and edit your shell configuration file (~/.bashrc, ~/.zshrc, or ~/.bash_profile):
       export PATH="$PATH:~/development/flutter/bin"
    

    Save the file and run:

       source ~/.bashrc
    
  2. To verify the addition of Flutter to your PATH, run:

   echo $PATH
Enter fullscreen mode Exit fullscreen mode

Step 4: Verify Flutter Installation

  1. Open a terminal or command prompt.
  2. Run the following command:
   flutter doctor
Enter fullscreen mode Exit fullscreen mode
  • This checks for any missing dependencies and ensures that Flutter is correctly installed.
    1. Review the output and resolve any issues mentioned (e.g., missing tools or SDKs).

2. Install Development Tools

Step 1: Install a Code Editor

  1. Download and install Visual Studio Code or Android Studio.
  2. For Visual Studio Code:
    • Open the Extensions Marketplace.
    • Search for "Flutter" and "Dart" extensions and install them.

Step 2: Install Android Studio

  1. Download and install Android Studio.
  2. Open Android Studio and complete the setup wizard to install essential components.
  3. Open the SDK Manager (under Configure > SDK Manager) and ensure the following components are installed:
    • Android SDK
    • Android Emulator
    • Platform Tools
  4. Add the platform-tools directory to your PATH.

    • Example (macOS/Linux):
     export PATH="$PATH:~/Library/Android/sdk/platform-tools"
    

Step 3: Install Xcode (macOS only)

  1. Open the App Store and download Xcode.
  2. Install the Command Line Tools by running:
   xcode-select --install
Enter fullscreen mode Exit fullscreen mode
  1. Accept the Xcode license agreement:
   sudo xcodebuild -license
Enter fullscreen mode Exit fullscreen mode

3. Configure Device/Emulator

For Android

  1. Set up an Android Virtual Device (AVD):
    • Open Android Studio.
    • Go to Tools > AVD Manager > Create Virtual Device.
    • Follow the prompts to configure your emulator.
  2. Alternatively, connect a physical Android device:
    • Enable Developer Mode and USB Debugging on your device.
    • Connect the device via USB to your computer.

For iOS (macOS only)

  1. Set up an iOS Simulator:

    • Open Xcode.
    • Go to Xcode > Preferences > Locations > Command Line Tools and select the installed version.
    • Run the simulator:
     open -a Simulator
    
  2. Alternatively, connect a physical iOS device:

    • Use a USB cable to connect the device.
    • Trust the computer from your iOS device.

4. Run Flutter Doctor

  • Run:
  flutter doctor
Enter fullscreen mode Exit fullscreen mode
  • Follow the output instructions to fix any missing dependencies.

5. Create Your First Flutter App

Step 1: Create a New Flutter Project

  1. Open a terminal and run:
   flutter create my_first_app
   cd my_first_app
Enter fullscreen mode Exit fullscreen mode

Step 2: Run the App

  • On an Android Emulator:
   flutter run
Enter fullscreen mode Exit fullscreen mode
  • On an iOS Simulator:
   flutter run -d ios
Enter fullscreen mode Exit fullscreen mode
  • On a connected physical device:
   flutter run -d <device_id>
Enter fullscreen mode Exit fullscreen mode

6. Optional: Enable Web/Windows/Linux Development

Enable Web Development

  • Run:
   flutter config --enable-web
Enter fullscreen mode Exit fullscreen mode
  • Start the web server:
   flutter run -d web
Enter fullscreen mode Exit fullscreen mode

Enable Desktop Development

  • Enable support for Windows/Linux:
   flutter config --enable-windows-desktop
   flutter config --enable-linux-desktop
Enter fullscreen mode Exit fullscreen mode
  • Run the app:
   flutter run -d windows
Enter fullscreen mode Exit fullscreen mode

7. Upgrade Flutter

  • To keep Flutter up to date, run:
  flutter upgrade
Enter fullscreen mode Exit fullscreen mode

Not Found

Top comments (0)

Not Found
Not Found