How to Build Your First Flutter App
Using Claude Code and Cursor in 2026

Flutter development in 2026 looks fundamentally different from what it looked like two years ago. Not because the framework itself has changed dramatically — Flutter 3.41.2 is mature, stable, and excellent — but because the tools developers use to write Flutter code have been transformed by AI. Claude Code and Cursor have become the two most significant additions to a Flutter developer's toolkit, and together they compress the time from idea to working app in ways that genuinely have to be experienced to be believed.

Claude Code compressed days of work into a streamlined 2-hour process for one developer building a geofencing-based iOS application — and that experience is consistent with what teams are reporting across Flutter projects of varying complexity.

This guide covers everything you need to get both tools set up and build your first Flutter app from scratch — from installing Flutter and Claude Code to writing your first screen and running it on a simulator.

What You'll Build

By the end of this guide you'll have a working Flutter app — a clean, functional task manager with a home screen, the ability to add and complete tasks, local data persistence, and a polished UI. It's simple enough to build in a session and complex enough to demonstrate the real capabilities of both tools.

The same workflow applies to any Flutter app you build after this — the tools and approach scale to apps of any complexity.

Part 1: Installing Flutter

Before Claude Code or Cursor can help you build a Flutter app, you need Flutter itself installed. The current stable version is Flutter 3.41.2, last updated March 6, 2026.

On macOS:

On Windows:

Download the Flutter SDK from flutter.dev/docs/get-started/install/windows. Extract the zip to a location like C:\src\flutter and add C:\src\flutter\bin to your system PATH environment variable.

On Linux:

After installation, run flutter doctor in your terminal. This command checks your environment and lists any missing dependencies. Work through any issues it flags before continuing — a clean flutter doctor output is worth getting right before you start building.

Setting up a simulator or emulator:

For iOS (macOS only): Install Xcode from the Mac App Store, then run:

For Android: Install Android Studio, go to Tools > Device Manager, and create a virtual device. Alternatively, connect a physical Android device with USB debugging enabled.

Part 2: Installing Claude Code

Claude Code has evolved from a beta research preview into one of the most capable AI coding tools available — and the way you install it has changed significantly. The native installer is now the recommended approach, dropping Claude Code onto your system with a single command and no runtime dependencies required.

Prerequisites:

Claude Code requires a Pro, Max, Teams, Enterprise, or Console account. The free Claude.ai plan does not include Claude Code. You'll need at least a Claude Pro subscription ($20/month) or an Anthropic Console account with API credits.

Even though Claude Code's native installer doesn't require Node.js, many popular MCP servers run via npx — so if you plan to use MCP integrations (and you should), install Node.js 18+ as part of your setup.

Installing on macOS/Linux (native installer — recommended):

This single command handles downloading, installing, and adding Claude Code to your PATH. The installer downloads the appropriate binary for your architecture and configures your shell automatically.

Verify the installation:

Installing on macOS via Homebrew:

Note: Homebrew installations do not auto-update. Run brew upgrade claude-code manually to get new versions.

Installing on Windows:

Claude Code on Windows requires Git for Windows or WSL. You can launch Claude from PowerShell, CMD, or Git Bash.

Option 1 — Native Windows (recommended):

Option 2 — WSL: Install WSL2 first (wsl --install in PowerShell as Administrator), then inside your WSL terminal:

Authenticating Claude Code:

Run claude in your terminal for the first time. You'll be prompted to authenticate. Choose your method:

• Claude Pro/Max subscription: Follow the browser-based OAuth flow
• Anthropic Console API key: Set your key as an environment variable:

Selecting your model:

Claude Code supports multiple models. Claude Sonnet 4.6 is the best coding model with improved consistency. For serious development work, Claude Sonnet 4.6 or Opus provide substantially better results.

Part 3: Setting Up the Flutter Dev Container for Claude Code

The best way to use Claude Code with Flutter is through a development container — a pre-configured environment that gives Claude Code full access to Flutter tools, simulators, and the Dart SDK.

Install the Dev Containers extension in Cursor (or VS Code), then set up the Flutter devcontainer configuration:

This installs a comprehensive Flutter skill that gives Claude Code deep knowledge of Flutter conventions, widget patterns, state management approaches, and testing practices specific to Flutter development.

Add these useful Flutter aliases to your shell configuration to speed up your workflow:

Run source ~/.zshrc to activate the aliases.

Part 4: Installing and Configuring Cursor for Flutter

Flutter's official documentation lists Cursor as one of the recommended AI tools for Flutter development alongside Claude Code, Windsurf, and Gemini Code Assist.

Download Cursor from cursor.sh and install it for your platform (see our previous guide for detailed Cursor installation steps). Once installed:

Install the Flutter and Dart extensions:

Open Cursor and press Cmd+Shift+X (macOS) or Ctrl+Shift+X (Windows/Linux) to open the extensions panel. Search for and install:

• Flutter (by Dart Code)
• Dart (by Dart Code)

These extensions provide syntax highlighting, code completion, widget snippets, and the ability to run Flutter commands directly from Cursor.

Configure Cursor for Flutter:

Open Cursor Settings (Cmd+,) and add these Flutter-specific settings:

Set Claude Sonnet 4.6 as your model in Cursor:

Click the model selector in the Cursor chat panel and choose claude-sonnet-4-6. This is the same model Claude Code uses by default — keeping your two tools on the same model ensures consistent reasoning about your codebase.

Part 5: Creating Your Flutter Project

With both tools configured, create your project. Open your terminal and run:

Open the project in Cursor:

Now initialise Claude Code in the project:

Run /init to let Claude Code analyse your project and generate a CLAUDE.md file. This file acts as permanent context for Claude across sessions — capturing project overview, architecture, coding guidelines, and key requirements.

Type /init in the Claude Code terminal and wait for it to complete. Then open the generated CLAUDE.md file and add your project-specific context:

This CLAUDE.md file is committed to your repository — every team member who clones the project benefits from it automatically.

Part 6: Setting Up Dependencies

Ask Claude Code to set up your project dependencies. In the Claude Code terminal, type:

Claude Code will update pubspec.yaml, run flutter pub get, and create the folder structure — all in one pass. Verify the output by checking the Explorer panel in Cursor.

Part 7: Building the App With Claude Code and Cursor Together

Here's where the two tools work together most effectively. Use Claude Code for large, structural changes across multiple files — architecture decisions, feature implementation, data layer setup. Use Cursor for focused, screen-level UI work where you want to see the visual result as you iterate.

Step 1: Create the Task model (Claude Code)

In the Claude Code terminal:

Claude Code will create the model file, add Hive annotations, and run the build_runner command to generate the adapter.

Step 2: Create the repository and Riverpod providers (Claude Code)

Step 3: Build the home screen (Cursor)

Switch to Cursor for the UI work. Open the Cursor chat and type:

Cursor's Composer will build the complete home screen widget. Use the Flutter extension's hot reload — press r in your terminal where flutter run is running — to see changes instantly on your simulator.

Step 4: Build the add task screen (Cursor)

Step 5: Add animations and polish (Cursor)

Part 8: Using Claude Code 2.0's Sub-Agents for Parallel Work

Claude Code 2.0 introduced sub-agents — mini-agents that work on specific parts of your project simultaneously. You can have one sub-agent work on UI screens, another on logic, one for Firebase setup, and another for tests — they work separately but stay in sync.

For a task manager app, use sub-agents to build features in parallel:

Claude Code will spin up three parallel agents, each working on a separate concern. This is one of the most significant speed advantages of Claude Code 2.0 — work that would take a developer several hours to sequence can run in parallel.

Part 9: Using Plan Mode for Complex Features

Plan Mode in Claude Code is accessible by pressing Shift + Tab twice. It's designed for reasoning and breaking down requirements into actionable steps before any code is written.

Use Plan Mode before implementing any complex feature:

Press Shift + Tab twice to enter Plan Mode, then type:

Claude Code will produce a step-by-step implementation plan covering the packages needed, the permission handling approach, the notification scheduling logic, and the settings UI. Review and adjust the plan before approving it for implementation.

Part 10: Setting Up the MCP Flutter Inspector

The mcp_flutter integration connects Claude Code directly to Flutter's debug service — allowing Claude to inspect your running app, read widget trees, and make changes based on what it actually sees rather than just the code.

Run your Flutter app in debug mode with the VM service enabled:

Note the VM service port from the output, then connect Claude Code:

Restart Claude Code. You can now ask it to inspect your running app directly:

This level of live app introspection is what separates a basic AI coding workflow from a genuinely integrated development experience.

Part 11: Running on a Real Device and Building for Release

Test on a real device before submitting to the stores. Connect your device via USB and run:

When you're ready to build for release, ask Claude Code to handle the configuration:

The Workflow in Practice

The combination that works best for Flutter development in 2026 is using Claude Code and Cursor for what each does best.

Claude Code is your architect and engineer. Use it in the terminal for structural decisions, multi-file changes, complex feature implementation, test writing, and anything that requires deep understanding of your entire codebase. Use Claude Haiku for quick brainstorming, Sonnet as your main work model for multi-file changes, and switch to Opus when the app is nearly complete to catch hidden issues like memory leaks and bad async patterns.

Cursor is your UI builder. Use it inside the editor for screen-level widget work where you want to iterate quickly on visual output, see Composer make multi-file changes in context, and use Tab completion to write Dart code faster. The real-time preview of changes through hot reload makes Cursor the faster tool for pure UI iteration.

Together, they cover the full Flutter development lifecycle — from architecture to UI to testing to release — faster and with better code quality than either tool alone.

The honest conclusion from developers who have used this workflow consistently: AI doesn't replace developer intuition — it amplifies it. The future of Flutter development is human creativity paired with AI efficiency.