Welcome back to our Flutter blogging series! Yesterday, we explored why Flutter is an amazing choice for cross-platform development. Today, we get our hands dirty by setting up your complete Flutter development environment. This is the crucial first step to bringing your app ideas to life!

A well-configured environment ensures a smooth development experience, allowing you to focus on coding rather than troubleshooting setup issues. Let’s get started!

Step 1: Install the Flutter SDK

The Flutter SDK (Software Development Kit) is the core of your Flutter development. It contains everything you need to compile your Flutter apps.

For Windows:

1. System Requirements: Ensure your system meets the requirements:
   • OS: Windows 10 or later (64-bit)
   • Disk Space: 1.64 GB (does not include disk space for IDE/tools)
   • Tools: PowerShell 5.0 or newer, Git for Windows.
2. Download the SDK: Visit the official Flutter installation page for Windows: https://flutter.dev/docs/get-started/install/windows and download the latest stable release.
3. Extract the Archive: Extract the flutter_windows_x.x.x-stable.zip file to a preferred installation location, e.g., C:\src\flutter. Do NOT install Flutter in a directory like C:\Program Files\ that requires elevated privileges.
4. Update your Path (Crucial!):
   • Open the Start menu, search for “environment variables,” and select “Edit the system environment variables.”
   • In the System Properties dialog, click “Environment Variables…”.
   • Under “User variables for [Your Username],” select “Path” and click “Edit…”.
   • Click “New” and add the path to the bin directory inside your Flutter installation (e.g., C:\src\flutter\bin).
   • Click “OK” on all dialogs to close them.
5. Verify Installation: Open a new PowerShell or Command Prompt window and run:flutter doctor
This command checks your environment and displays a report. It will likely show some missing dependencies (like Android Studio or VS Code), which we’ll address next.

For macOS:

1. System Requirements:
   • OS: macOS (64-bit)
   • Disk Space: 2.8 GB (does not include disk space for IDE/tools)
   • Tools: Git.
2. Download the SDK: Visit the official Flutter installation page for macOS: https://flutter.dev/docs/get-started/install/macos and download the latest stable release.
3. Extract the Archive: Extract the flutter_macos_x.x.x-stable.zip file to a preferred installation location, e.g., ~/development/flutter.
4. Update your Path (Crucial!):
   • Open your terminal.
   • If you’re using Zsh (default for macOS Catalina+), open ~/.zshrc. If Bash, open ~/.bash_profile.
   • Add the following line (replace /path/to/flutter with your actual Flutter path):export PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/bin"
Example: export PATH="$HOME/development/flutter/bin:$PATH"
   • Save the file and then run source ~/.zshrc (or source ~/.bash_profile) to refresh your terminal’s path.
5. Verify Installation: Open a new terminal window and run:flutter doctor
This command will check your environment and report any missing components.

For Linux:

1. System Requirements:
   • OS: Linux (64-bit)
   • Disk Space: 2.8 GB (does not include disk space for IDE/tools)
   • Tools: Git, wget or curl.
2. Download the SDK: Visit the official Flutter installation page for Linux: https://flutter.dev/docs/get-started/install/linux and download the latest stable release.
3. Extract the Archive: Extract the flutter_linux_x.x.x-stable.tar.xz file to a preferred installation location, e.g., ~/development/flutter.
4. Update your Path (Crucial!):
   • Open your terminal.
   • Add the Flutter bin directory to your PATH for the current session:export PATH="$PATH:$(pwd)/flutter/bin"
   • For a permanent update, add the line to your shell’s config file (e.g., ~/.bashrc, ~/.zshrc).export PATH="$HOME/development/flutter/bin:$PATH"
   • Save the file and then run source ~/.bashrc (or source ~/.zshrc) to refresh your terminal’s path.
5. Install Dependencies: Flutter requires some specific libraries. Run:sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev # For Debian/Ubuntu # Or for Fedora/RHEL: # sudo yum install clang cmake ninja-build pkg-config gtk3-devel xz-devel
6. Verify Installation: Open a new terminal window and run:flutter doctor
This will check your environment and report any missing components.

Step 2: Choose and Set Up Your IDE

While you can use any text editor, we highly recommend either Visual Studio Code or Android Studio for Flutter development due to their excellent plugin support and integrated tools.

Option A: Visual Studio Code (Recommended for Beginners)

1. Download VS Code: If you don’t have it, download and install VS Code from https://code.visualstudio.com/.
2. Install Flutter and Dart Extensions:
   • Open VS Code.
   • Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
   • Search for “Flutter” and install the official Flutter extension. This will automatically install the Dart extension as well.
3. Run flutter doctor again: After installing extensions, run flutter doctor in your terminal to see if the VS Code dependency check passes.

Option B: Android Studio

1. Download Android Studio: Download and install Android Studio from https://developer.android.com/studio. Follow the installation wizard.
2. Install Flutter and Dart Plugins:
   • Open Android Studio.
   • Go to File > Settings > Plugins (Windows/Linux) or Android Studio > Preferences > Plugins (macOS).
   • Search for “Flutter” in the Marketplace and install the official Flutter plugin. This will prompt you to install the Dart plugin too; accept this.
   • Restart Android Studio after installation.
3. Configure Android SDK (if needed): Android Studio usually handles this, but if flutter doctor complains about the Android SDK, go to File > Settings > Appearance & Behavior > System Settings > Android SDK and ensure at least one Android SDK Platform is installed.
4. Accept Android Licenses: Open a terminal/command prompt and run:flutter doctor --android-licenses
Review and accept the licenses by typing y when prompted.
5. Run flutter doctor again: This should now show Android Studio and Android Toolchain as correctly configured.

Step 3: Configure an Emulator/Simulator or Physical Device

You need a device to run and test your Flutter apps.

For Android Emulator (via Android Studio):

1. Open Android Studio.
2. Go to Tools > Device Manager (or AVD Manager in older versions).
3. Click “Create Virtual Device.”
4. Choose a phone (e.g., Pixel 4) and a system image (e.g., a recent Android version like API Level 30+).
5. Follow the prompts to download the system image and finalize the AVD creation.
6. Start the emulator from the Device Manager.

For iOS Simulator (via Xcode – macOS only):

1. Install Xcode: Download Xcode from the Mac App Store. This is a large download and might take a while.
2. Install Command Line Tools: After Xcode is installed, open a terminal and run:sudo xcode-select --install
3. Open Simulator: You can open an iOS Simulator directly from Xcode (Xcode > Open Developer Tool > Simulator) or run it from the command line:open -a Simulator
4. Run flutter doctor again: This should resolve Xcode-related issues.

For Physical Devices:

• Android:
  1. Enable Developer Options and USB Debugging on your Android phone (usually found by tapping “Build number” 7 times in “About phone”).
  2. Connect your phone to your computer via USB.
  3. Confirm the “Allow USB debugging?” prompt on your phone.
  4. Run flutter devices in your terminal to ensure Flutter detects it.
• iOS (macOS only):
  1. Connect your iPhone/iPad to your Mac.
  2. Trust your computer if prompted on the device.
  3. In Xcode, open Window > Devices and Simulators, select your device, and enable it for development.

Step 4: Create and Run Your First Flutter App (“Hello World”)

Now that your environment is ready, let’s create a simple app!

1. Open your IDE (VS Code or Android Studio).
2. Create a New Flutter Project:
   • In VS Code: Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), type Flutter: New Project, select Application, choose a directory, and enter a project name (e.g., my_first_app).
   • In Android Studio: Go to File > New > New Flutter Project, select Flutter ApplicationSpecify the SDK path, project name, and location.
3. Navigate into your project directory in the terminal:cd my_first_app
4. Run the App: Ensure your emulator/simulator is running or a physical device is connected. Then run:flutter run
This command will build and deploy your app to the connected device/emulator. You should see a simple counter app.

Congratulations! You’ve successfully set up your Flutter development environment and run your first Flutter app.

Conclusion

Setting up your development environment is a foundational step, and while it can sometimes be tedious, doing it correctly now will save you a lot of headaches later. You’re now equipped to start building truly cross-platform applications with Flutter!

Tomorrow, we’ll dive into the basics of the Dart programming language, which is essential for writing Flutter apps. Get ready to learn about variables, data types, and operators!

Tags: android studiodartDebuggingDevelopment EnvironmentEmulatorFirst AppflutterFlutter Beginner Tutorialflutter learnFlutter Tutorials flutter skills flutter app developmentInstallationLinuxmacOSMobile DevelopmentSDKSetupSimulatorVS CodeWindows