Flutter for Beginners: Course Setup and First App Run

What You’re Setting Up (and Why)

To run Flutter apps, you need three pieces working together: the Flutter SDK (the tools and framework), an editor with Flutter/Dart support (to write and run code), and at least one target device (an emulator/simulator or a physical phone). This chapter walks through a checklist to install and verify each part, then creates and runs a first Flutter project to confirm everything is correctly wired.

Checklist 1: Install the Flutter SDK

Step 1: Download and place the SDK

• Download the Flutter SDK for your operating system from the official Flutter website.
• Extract it to a stable folder path with no special permissions. Recommended examples:
  • Windows: C:\src\flutter
  • macOS: ~/development/flutter
  • Linux: ~/development/flutter
• Avoid installing inside locations that may require elevated permissions or get cleaned automatically (for example, Program Files on Windows).

Step 2: Add Flutter to your PATH

You should be able to run flutter from any terminal. Add the bin folder to your PATH:

• Windows: add C:\src\flutter\bin to the user PATH environment variable.
• macOS/Linux: add this line to your shell config (for example ~/.zshrc or ~/.bashrc):

  export PATH="$PATH:$HOME/development/flutter/bin"

Open a new terminal after changing PATH.

Verify: Flutter is reachable

flutter --version

If you see a version output, the SDK is installed and your PATH is correct.

Common pitfall: “flutter: command not found” (or not recognized)

• Confirm you added the path to the bin directory, not just the Flutter folder.
• Restart the terminal (or your IDE) so it reloads environment variables.
• On Windows, confirm you edited the correct PATH (User vs System) and there are no typos.

Checklist 2: Install an Editor with Flutter/Dart Support

You can use multiple editors, but the key requirement is Dart and Flutter tooling support for code completion, debugging, and running apps.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Option A: Visual Studio Code

• Install VS Code.
• Install the extensions:
  • Dart
  • Flutter
• Open the Command Palette and ensure Flutter commands are available (for example, “Flutter: New Project”).

Option B: Android Studio / IntelliJ

• Install Android Studio (or IntelliJ).
• Install plugins: Flutter (which will also prompt to install Dart).
• Make sure the IDE can locate the Flutter SDK (you may be asked to set the SDK path).

Common pitfall: IDE can’t find Flutter SDK

• In the IDE settings, set the Flutter SDK path to the folder where you extracted Flutter (for example C:\src\flutter), not the bin folder.
• Verify flutter --version works in a terminal; if it doesn’t, fix PATH first.

Checklist 3: Configure a Device Target (Android and/or iOS)

Android setup (emulator or physical device)

Step 1: Install Android tooling

• Install Android Studio (even if you code in VS Code) because it provides the Android SDK, emulator, and platform tools.
• Open Android Studio > SDK Manager and install:
  • Android SDK Platform (a recent stable API level)
  • Android SDK Platform-Tools
  • Android SDK Build-Tools
  • Android Emulator

Step 2: Create an Android Virtual Device (AVD)

• Android Studio > Device Manager > Create Device.
• Pick a phone profile and a system image (x86_64 for Intel/AMD, arm64 for Apple Silicon where applicable).
• Finish and start the emulator.

Step 3: Verify Flutter sees the device

flutter devices

You should see the running emulator listed.

Common pitfall: Emulator not detected

• Start the emulator first, then re-run flutter devices.
• Run flutter doctor to see missing Android components.
• Ensure Android SDK licenses are accepted (see the diagnostic section below).
• If using a physical device: enable Developer Options and USB debugging, and install OEM USB drivers on Windows if needed.

iOS setup (macOS only)

To run on iOS simulators or iPhones, you must be on macOS with Xcode installed.

Step 1: Install Xcode and command line tools

• Install Xcode from the Mac App Store.
• Open Xcode once to complete initial setup.
• Install command line tools if prompted.

Step 2: Create and run an iOS Simulator

• Open Xcode > Settings/Preferences > Platforms (or use the Simulator app) and ensure a simulator runtime is installed.
• Start a simulator device (for example, iPhone 15).

Step 3: Verify Flutter sees the simulator

flutter devices

Common pitfall: CocoaPods prompts or iOS build failures

Many iOS Flutter projects rely on CocoaPods for native dependencies. If flutter doctor or an iOS build mentions CocoaPods, install it and try again.

sudo gem install cocoapods

If you see permission or Ruby-related issues, prefer the approach recommended by Flutter’s official macOS/iOS setup docs for your system, then re-run:

flutter doctor

Checklist 4: Verify the Toolchain with Diagnostics

Run Flutter Doctor

This command checks your environment and reports what’s missing.

flutter doctor

Read the output carefully. It lists categories like Flutter, Android toolchain, Xcode, connected devices, and IDE plugins.

Fix common issues reported by flutter doctor

Android licenses not accepted

If you see a message about Android licenses, run:

flutter doctor --android-licenses

Accept the prompts, then re-run flutter doctor.

PATH issues (Git, Java, or Flutter)

• If Flutter is found but Android tooling is not, ensure Android Studio is installed and the Android SDK is present.
• If Java is missing for Android builds, install a supported JDK (Android Studio usually bundles one) and ensure the IDE uses it.
• After changing environment variables, restart terminals and IDEs.

Device not listed

• Emulator/simulator must be running before it appears.
• For physical devices: ensure the device is unlocked, trusted (iOS), and USB debugging is enabled (Android).
• Re-check with:

  flutter devices

Checklist 5: Create and Run Your First Flutter App

Step 1: Create a new project

Choose a folder where you keep your code, then run:

flutter create first_app

This generates a starter Flutter project with a default app and platform folders.

Step 2: Open the project in your editor

• Open the first_app folder in VS Code or Android Studio.
• Locate lib/main.dart; this is the entry point for the app.

Step 3: Start an emulator/simulator (or connect a device)

• Android: start an AVD from Android Studio Device Manager.
• iOS: start a simulator from Xcode or the Simulator app.
• Physical device: connect via USB and ensure it appears in flutter devices.

Step 4: Run the app

From the project directory:

flutter run

If multiple devices are available, Flutter may ask you to choose. You can also specify a device id:

flutter devices

flutter run -d <device_id>

What you should observe in the default starter app

• The app launches on your emulator/simulator/device without crashing.
• You see a simple counter screen (a number in the center and a “+” floating action button).
• Tapping the “+” increments the counter number; this confirms UI rendering and basic state updates are working.
• Your terminal shows a successful build/run log and a message indicating the app is running in debug mode.
• If you edit lib/main.dart (for example, change the title text) and save, you should be able to use hot reload from your editor or terminal to see changes quickly while the app stays running.

Common pitfall: Build succeeds but app won’t launch

• Confirm the device has enough storage and is fully booted (emulators can take time on first run).
• Try restarting the emulator/simulator.
• Run flutter clean then flutter pub get and try flutter run again:

  flutter clean

  flutter pub get

  flutter run