Flutter Tutorial for Beginners: From Install to First App (Step-by-Step, 2026)

Every great Flutter app started with someone staring at a blank terminal. Let’s fix that.

Flutter is Google’s UI toolkit for building natively compiled apps for mobile, web, and desktop — all from a single Dart codebase. In 2026 it’s the dominant choice for cross-platform development, and getting from zero to a running app takes under 30 minutes if you follow the right steps. This tutorial gives you exactly that: no fluff, just a clean path from fresh machine to a live app on your device or emulator.

What you’ll have by the end: Flutter installed and verified, a new project created, and a real app running on Android or iOS — plus an understanding of why each step matters.

Table of Contents

Why Flutter in 2026?

Flutter isn’t popular because of hype — it’s popular because it solves a real problem. Before Flutter, building an app for both iPhone and Android meant writing it twice in two different languages. Flutter changed that. You write Dart once, and it compiles to native ARM code for both platforms.

Step 1: Install the Flutter SDK

Head to docs.flutter.dev/get-started/install and select your operating system. The official docs are the most up-to-date source — always start there.

After extracting, add the Flutter bin directory to your system PATH. On macOS/Linux, add this line to your ~/.zshrc or ~/.bashrc:

export PATH="$PATH:/path/to/flutter/bin"

On Windows, search for “Environment Variables” in the Start menu, find the Path variable under System Variables, and add the full path to flutterbin.

Step 2: Verify Your Setup with flutter doctor

Open a new terminal window (so the updated PATH takes effect) and run:

flutter doctor

You’ll see output like this:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Android Studio (version 2024.x)
[✓] VS Code (version 1.x)
[✓] Connected device (1 available)
[✓] Network resources

For each [✗] item, run flutter doctor -v to get the detailed error message and follow its instructions. The two most common fixes are accepting Android SDK licenses (flutter doctor --android-licenses) and installing Xcode command line tools (xcode-select --install).

Step 3: Choose and Configure Your Editor

Flutter works with any editor, but two have first-class support:

After installing the plugin, restart your editor. You should now get Dart syntax highlighting, widget autocomplete, and the ability to run your app directly from the editor toolbar.

Step 4: Create Your First Project

Navigate to wherever you keep your code projects and run:

flutter create my_first_app
cd my_first_app

Flutter generates a complete, working project with a sample counter app already written. Open the folder in your editor:

# VS Code
code .

# Android Studio
studio .

Step 5: Understand the Project Structure

Don’t just run the app blindly — take 2 minutes to understand what was generated. You’ll work with these files constantly:

my_first_app/
├── lib/
│   └── main.dart          ← Your entire app lives here to start
├── android/               ← Android platform project (rarely touch this)
├── ios/                   ← iOS platform project (rarely touch this)
├── test/
│   └── widget_test.dart   ← Automated tests
└── pubspec.yaml           ← Dependencies, fonts, assets — your config file

Open lib/main.dart. You’ll see the generated counter app — a StatefulWidget that increments a number when you press a button. Don’t worry about understanding all of it yet; we build on these concepts step by step in the rest of this series.

Step 6: Run the App

You need a target to run on. You have two options:

To enable Developer Options on Android: go to Settings → About Phone and tap Build Number seven times. Then go back to Settings and you’ll see Developer Options — enable USB Debugging inside it.

Once your device or emulator is running, check that Flutter can see it:

flutter devices

You should see your device listed. Now run the app:

flutter run

The first build takes 1–2 minutes while Flutter compiles everything. Subsequent runs are much faster. When it’s ready, you’ll see the Flutter counter app on your device — a blue app bar, a number in the center, and a floating + button.

Step 7: Try Hot Reload

Hot reload is one of Flutter’s biggest productivity features. While the app is running, open lib/main.dart and find this line:

// Find this line in the default counter app:
title: 'Flutter Demo Home Page',

// Change it to:
title: 'My First Flutter App',

Save the file. The app updates on-device in under a second — without losing the current state (the counter value stays where it was). That’s hot reload.

What to Learn Next

You’ve got Flutter installed, your environment verified, a project created, and a live app running with hot reload. That’s the entire foundation. Here’s where the real learning begins:

The best next step from here is our two-part series building a full notes app — it teaches widgets, state, navigation, and persistence in sequence, each concept building on the last.