Labels

How to Set Up Your Flutter Dev Environment (SDK, VS Code) | Ch. 3

Flutter Course Chapter 3: Setting Up Your Environment, showing a developer at a desk with VS Code, Android Studio, and Flutter logos on a gear background.


Welcome to Chapter 3! In the last chapter, we got our feet wet in the DartPad sandbox, learning the fundamentals of the Dart language. Now, it's time to graduate to a professional setup.

This is the most important chapter in the entire course. It's not as "fun" as writing UI code, but a correct setup is the foundation for everything you will do from now on. We're moving from a simple online editor to building a full, local development environment on your own computer.

A Quick Warning: This chapter can be frustrating. You might run into errors. Your computer might be different from mine. This is normal. Every single developer—myself included—has struggled with setup. The goal is to follow the steps carefully and learn to read the error messages. You can do this!

Today, we will install all the tools you need to become a real Flutter developer. By the end, we'll run the famous flutter doctor command and get our first app running on a virtual device.

This guide covers the two most common operating systems: Windows and macOS. If you are on Linux, the steps are similar, and you can find official instructions here.

📖 Chapter 3: Table of Contents

  1. The "Big Picture": What Are We Installing?
  2. Part 1: Installing the Flutter SDK
  3. Part 2: The Command Center: `flutter doctor`
  4. Part 3: Platform-Specific Tools (Android & iOS)
  5. Part 4: Your Code Editor (VS Code)
  6. Part 5: The Grand Finale (First App & Hot Reload!)
  7. Conclusion: You're Ready!

1. The "Big Picture": What Are We Installing?

It's helpful to know *what* you're installing and *why*. We're setting up four main components:

  1. The Flutter SDK: This is the "Software Development Kit." It's a folder full of the core Flutter engine, the Dart language, all the built-in widgets, and the command-line tools like flutter. This is the "brain."
  2. An IDE (Code Editor): This is where you'll *write* your code. The two big choices are Visual Studio Code (VS Code) and Android Studio.
    • We will use VS Code. It's lightweight, fast, and extremely popular in the Flutter community.
  3. Platform Toolchains: Flutter *builds* native apps, so it needs the native tools to do so.
    • To build Android apps, you need Google's Android Studio (yes, we need this even if we use VS Code) for its "Android SDK" and emulators.
    • To build iOS apps, you need Apple's Xcode. This is macOS only. You cannot build or test iOS apps on a Windows or Linux computer.
  4. Emulators / Simulators: These are "virtual phones" that run on your computer so you can test your app without needing a physical device.

Part 1: Installing the Flutter SDK

First, we need the "brain."

  1. Go to the official Flutter install page: https://docs.flutter.dev/get-started/install
  2. Click on your operating system (Windows or macOS).
  3. Download the "flutter_windows_...zip" or "flutter_macos_...zip" file.
  4. This is important: Do *not* unzip this in a folder that requires special permissions, like C:\Program Files\ on Windows.
  5. My Recommendation: Create a folder in your user directory called C:\Users\YOUR_NAME\development\ (on Windows) or /Users/YOUR_NAME/development/ (on macOS).
  6. Unzip the downloaded file inside that development folder. You will now have a folder path that looks like C:\Users\YOUR_NAME\development\flutter.

Inside this flutter folder, you'll see a bin folder. The full path to that folder (e.g., C:\Users\YOUR_NAME\development\flutter\bin) is what we need for the next step.

The Most Important Step: Updating Your "PATH"

You have the tools, but your computer's command prompt doesn't know where they are. If you open a terminal and type flutter, you'll just get an error: "command not found."

The PATH is a system variable that acts like a phonebook for your computer. It tells the terminal, "Hey, if you get a command you don't recognize, check these folders."

We need to add our flutter\bin folder to this "phonebook." This is the #1 place new developers get stuck.

How to Update Your PATH on Windows 10/11

  1. In the Windows Start Menu, type "env" or "environment".
  2. Click on "Edit the system environment variables".
  3. A "System Properties" window will pop up. Click the "Environment Variables..." button.
  4. A new window will appear. In the top box (for "User variables"), find the variable named "Path".
  5. Click "Path", then click the "Edit..." button.
  6. You'll see a list of all the folders in your "phonebook." Click the "New" button.
  7. Paste in the full path to your flutter\bin folder. For example: C:\Users\YourName\development\flutter\bin
  8. Click "OK" on all the windows to close them.
You must close and reopen any open terminal/command prompt windows! They won't know about the new PATH until you restart them.

To check if it worked, open a new Command Prompt and type: 

flutter

If it worked, you will see a list of Flutter commands! If you see "command not found," double-check your path.

How to Update Your PATH on macOS

macOS (and Linux) uses a configuration file in your home directory to manage the PATH. This is usually .zshrc (for modern Macs) or .bash_profile (for older ones). We'll assume .zshrc.

  1. Open the Terminal app.
  2. Type nano ~/.zshrc and press Enter. This will open a simple text editor inside your terminal. (If the file is blank, that's okay!)
  3. Go to the very bottom of the file and add this line. Remember to replace "YOUR_NAME" with your actual user folder. 

export PATH="$PATH:/Users/YOUR_NAME/development/flutter/bin"
  1. To save and exit: Press Control + O (to "Write Out"), then press Enter to confirm the filename. Then press Control + X to X-it.
  2. You must close and reopen your Terminal!
  3. In your new Terminal window, type this to confirm it worked: 
which flutter

If it worked, it will print out the path you just added, like /Users/YOUR_NAME/development/flutter/bin/flutter. You're all set!

Part 2: The Command Center: `flutter doctor`

Now that your computer can find the flutter command, we can use its most powerful tool: flutter doctor.

This command is a diagnostic tool that checks your system and tells you exactly what's installed and what's missing.

Open a new terminal and run:

flutter doctor

You will see a "report card" that looks something like this:

[✓] Flutter (Channel stable, 3.16.0, on macOS 14.1.1...)
[!] Android toolchain - develop for Android devices
    ✗ Android SDK at /Users/yourname/Library/Android/sdk
[!] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.84.2)
[✓] Connected device (0 available)

Don't panic! [✓] (a checkmark) is good. [!] or [✗] (an exclamation or X) means we have work to do.

Our goal for the rest of this chapter is to turn all those `[!]` into `[✓]`.

Part 3: Platform-Specific Tools (Android & iOS)

Now we need to give Flutter the tools to build for Android and iOS.

Setting up for Android (Windows & macOS)

This is the one part that's the same for both operating systems.

  1. Go to the Android Studio download page: https://developer.android.com/studio
  2. Download and install Android Studio (it's a big file).
  3. Run the "Android Studio Setup Wizard" and accept all the default options. This will install the core "Android SDK," "SDK Platform-Tools," and "SDK Build-Tools." This is what flutter doctor was s looking for.
  4. After it's installed, run flutter doctor again. You should see a change! The "Android toolchain" line might now have a new warning.
  5. Accept Android Licenses: flutter doctor will often tell you, "Some Android licenses not accepted." To fix this, run the command it suggests: 
flutter doctor --android-licenses

It will ask you to review several licenses. Press y and Enter for each one.

Set up an Android Emulator (Virtual Phone):

  1. Open Android Studio.
  2. On the welcome screen, click "More Actions" > "Virtual Device Manager" (or "AVD Manager").
  3. Click "Create Device" (a big + button).
  4. I recommend picking a Pixel device (e.g., "Pixel 7 Pro"). Click "Next."
  5. It will ask you to select a "System Image." This is the version of Android. I recommend picking the latest stable one (e.g., Tiramisu or Upside Down Cake). You will have to click the "Download" icon next to it and wait.
  6. Once downloaded, select it and click "Next."
  7. You can leave all the advanced settings alone. Just click "Finish."
  8. You will now see your new virtual device in the list. You can click the "Play" (▶) button to boot it up!

Now, run flutter doctor one more time. The "Android toolchain" section should be all [✓]!

Setting up for iOS (macOS Only)

If you are on Windows, you can skip this section entirely. You cannot build for iOS.

This part is simpler, but it takes a long time.

  1. Open the App Store on your Mac.
  2. Search for "Xcode" and install it.
  3. Go make a coffee. This is a *massive* download (often 10-15 GB) and can take over an hour.
  4. Once installed, you must open Xcode at least once to let it install its "command-line tools."
  5. Run Post-Install Commands: After Xcode is set up, open your Terminal and run these two commands, one after the other, to set up the command-line tools and accept the license. 

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license

(You'll have to type your password and press "agree" for the license).

  1. Run the iOS Simulator: You can open the iOS Simulator by running this command in your terminal: 
open -a Simulator

A virtual iPhone will boot up. Now, run flutter doctor. The Xcode section should be all [✓]!

Part 4: Your Code Editor (VS Code)

We installed Android Studio for its tools, but we'll *write* our code in the fast and lightweight VS Code.

  1. Go to the VS Code website: https://code.visualstudio.com/
  2. Download and install it.
  3. Open VS Code.
  4. On the left-hand side, click the "Extensions" icon (it looks like four squares).
  5. In the search bar, type "Flutter".
  6. Click "Install" on the main Flutter extension (from "Dart Code").
  7. This extension is amazing. It will automatically install the Dart extension for you, and it adds all the syntax highlighting, code completion, and "run" buttons you'll need.

Run flutter doctor one last time. You should now have a beautiful report card full of green checkmarks! 

[✓] Flutter (Channel stable, ...)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS (if on Mac)
[✓] Chrome - develop for the web
[✓] Android Studio (version ...)
[✓] VS Code (version ...)
[✓] Connected device (2 available)

The "Connected device" line will show your Android Emulator and iOS Simulator if they are running.

Part 5: The Grand Finale (First App & Hot Reload!)

You did it. The hard part is over. Now for the reward.

  1. Open VS Code.
  2. Open the "Command Palette" by pressing Ctrl + Shift + P (Windows) or Cmd + Shift + P (macOS).
  3. Type "Flutter: New Project" and press Enter.
  4. Select "Application".
  5. Choose a folder to save your project (like that development folder we made).
  6. It will ask for a name. It must be all lowercase with underscores (e.g., my_first_app or hello_world).
  7. VS Code will open the new project. It will take a moment to download all the dependencies.
  8. Go to the file lib/main.dart. This is the main file for your entire app.
  9. Make sure your emulator or simulator is running.
  10. In the bottom-right corner of VS Code, you'll see a "device" name. Click it and select your running emulator (e.g., "Pixel 7 Pro" or "iPhone 15 Pro").
  11. Now, go to the top menu and click "Run" > "Run Without Debugging" (or just press Ctrl + F5).

The first build will be slow. But after a minute or two... BAM. The Flutter Demo Counter App will appear on your virtual phone.

Now for the magic. Go into lib/main.dart. Find the text that says: 'You have pushed the button this many times:'

Change it to: 'I just built my first Flutter app!'

Now, just press Ctrl + S to save the file.

In less than a second, without the app restarting, the text on your virtual phone will update.

That is Stateful Hot Reload. That is what you worked so hard for.

Conclusion: You're Ready!

Congratulations, seriously. You just completed the single hardest part of learning Flutter. You've built the foundation that every other developer works from. You've installed the SDK, configured your PATH, set up native toolchains, configured your IDE, and run your first app.

You are no longer a "future" developer. You are one, right now.

In the next chapter, we're going to dive deep into that lib/main.dart file. We'll tear apart the demo counter app, line by line, to understand what all that code means.

Tags

Comments

Post a Comment