Claude Code Flutter LSP Setup Guide (2026)
Connecting Claude Code to Flutter’s Language Server Protocol gives Claude real-time access to Dart type information, widget trees, and compilation errors. This means Claude can suggest widget refactors, fix type mismatches, and generate platform-specific code with full awareness of your project’s type system.
The Problem
Flutter projects have deep widget hierarchies, complex state management patterns, and platform-specific APIs. When Claude Code works on a Flutter project without LSP integration, it lacks type context. It cannot see that a Widget is actually a StatefulWidget with specific state fields, or that a method call has a type error. This leads to suggestions that look correct but fail at compile time.
Quick Solution
- Ensure Flutter SDK is on your PATH:
flutter --version
dart --version
- Verify the Dart analysis server works:
dart language-server --protocol=lsp
- Configure Claude Code to use the Dart LSP in your project’s CLAUDE.md:
# Flutter LSP Integration
- Dart analysis server provides type checking
- Run `dart analyze` before accepting any code changes
- Run `flutter test` after modifying widget code
- Create a hook to validate changes automatically. Add to
.claude/hooks/post-edit.sh:
#!/bin/bash
dart analyze --fatal-infos lib/
- Launch Claude Code in your Flutter project root where
pubspec.yamllives.
How It Works
Flutter uses the Dart analysis server as its LSP implementation. This server provides real-time type checking, code completion, and diagnostic information. While Claude Code does not directly connect to LSP servers as a client, you can use the analysis server indirectly through hooks and CLAUDE.md instructions.
When Claude edits Dart files, a post-edit hook runs dart analyze and feeds the results back. This gives Claude immediate feedback about type errors, missing imports, and deprecated API usage. Claude can then fix issues in a tight feedback loop without manual intervention.
CLAUDE.md plays a critical role here. By documenting your widget architecture, state management approach (Provider, Riverpod, BLoC), and naming conventions, Claude generates Flutter code that matches your project’s patterns. The LSP analysis then validates these changes against the actual type system.
Common Issues
dart analyze not found. Flutter bundles its own Dart SDK. Ensure flutter/bin is on your PATH, not just a standalone Dart installation. Run which dart to verify it points to the Flutter-bundled version.
Analysis server slow on large projects. The Dart analysis server loads your entire project on startup. For large monorepo Flutter projects, create an analysis_options.yaml that excludes generated files:
analyzer:
exclude:
- "**/*.g.dart"
- "**/*.freezed.dart"
- "build/**"
Claude generates code for wrong Flutter version. Specify your Flutter version and channel in CLAUDE.md. Flutter stable, beta, and master channels have different API surfaces, and Claude needs to know which one you are targeting.
Example CLAUDE.md Section
# Flutter Project
## Stack
- Flutter 3.24 (stable channel)
- Dart 3.5
- State management: Riverpod 2.x
- Navigation: go_router
- API: dio + retrofit
## Architecture
- lib/features/ — feature-based folder structure
- lib/core/ — shared widgets, theme, utils
- lib/data/ — repositories, models, data sources
## Rules
- All widgets must be const where possible
- Use riverpod code generation (@riverpod annotation)
- Run `dart analyze --fatal-infos` before any commit
- Run `flutter test` after modifying any widget
- Generated files: run `dart run build_runner build`
- Never manually edit .g.dart or .freezed.dart files
## Platform Notes
- iOS minimum: 15.0
- Android minimum SDK: 24
- Web: not supported in this project
Best Practices
- Run
dart analyzeas a post-edit hook so Claude gets immediate feedback on type errors without you checking manually. - Document your state management pattern in CLAUDE.md since Flutter has many competing approaches and Claude needs to know which one your project uses.
- Specify platform constraints so Claude does not suggest APIs unavailable on your target platforms (e.g., web-only APIs in a mobile-only project).
- Exclude generated files from analysis to keep feedback fast and prevent Claude from trying to modify auto-generated code.
- Pin dependency versions in
pubspec.yamland reference them in CLAUDE.md so Claude generates code compatible with your actual package versions.
Try it: Paste your error into our Error Diagnostic for an instant fix.
Related Reading
- Claude Code MCP Server Setup
- Claude Code for FPGA Development Workflow Tutorial
- Best Way to Use Claude Code for Debugging Sessions
Built by theluckystrike. More at zovo.one
Common Questions
How do I get started with claude code flutter lsp setup?
Begin with the setup instructions in this guide. Install the required dependencies, configure your environment, and test with a small project before scaling to your full codebase.
What are the prerequisites?
You need a working development environment with Node.js or Python installed. Familiarity with the command line and basic Git operations is helpful. No advanced AI knowledge is required.
Can I use this with my existing development workflow?
Yes. These techniques integrate with standard development tools and CI/CD pipelines. Start by adding them to a single project and expand once you have verified the benefits.
Where can I find more advanced techniques?
Explore the related resources below for deeper coverage. The Claude Code documentation and community forums also provide advanced patterns and real-world case studies.
Find the right skill → Browse 155+ skills in our Skill Finder.
Related Resources
Configure MCP → Build your server config with our MCP Config Generator.