playbooks
Learn Cursor Rules Windsurf Rules MCPs Modes
Log in

Flutter Development Assistant MCP server

Provides Flutter development assistance through code analysis, documentation validation, package evaluation, widget accessibility checks, test generation, bundle size analysis, and clean architecture scaffolding with intelligent caching and error handling.
Back to servers
Setup instructions
Provider
dvillegastech
Release date
Jul 03, 2025
Stats
16 stars
View on GitHub

Flutter MCP Service is an advanced development tool that enhances Flutter development through the Model Context Protocol (MCP). It provides intelligent caching, token management, and seamless integration with official Flutter documentation to help streamline your development workflow.

Quick Start

Installation

# Clone the repository
git clone https://github.com/dvillegastech/flutter_mcp_2.git
cd flutter_mcp_service

# Install dependencies
npm install

# Initialize cache
mkdir -p .cache

# Run health check
npm run health-check

# Start service
npm start

Integration with Claude Desktop / Cursor

Add to your MCP configuration file:

{
  "mcpServers": {
    "flutter-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/flutter_mcp_service/src/index.js"]
    }
  }
}

Tool List & Commands

Unified Tools (v2.0)

flutter_status

Check service health and cache statistics.

@flutter-mcp use flutter_status to check service health

flutter_search

Universal search across Flutter/Dart documentation, packages, and examples.

@flutter-mcp use flutter_search with query "Container" and limit 5
@flutter-mcp use flutter_search to find ListView examples

Parameters:

  • query (required): Search term
  • limit (optional): Max results (default: 10)
  • maxTokens (optional): Response size limit (default: 4000)

flutter_analyze

Smart Flutter documentation fetcher and code analyzer.

@flutter-mcp use flutter_analyze with identifier "Container"
@flutter-mcp use flutter_analyze with identifier "Container" and this code:
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

Parameters:

  • identifier (required): Widget/class name or package
  • code (optional): Code to analyze
  • topic (optional): "all", "docs", "analysis", "examples" (default: "all")
  • maxTokens (optional): Response size limit
  • includeExamples (optional): Include code examples (default: true)
  • includeAnalysis (optional): Include code analysis (default: true)

Legacy Tools (Backward Compatible)

analyze_widget

Analyze Flutter widget code for best practices, performance, and accessibility.

@flutter-mcp use analyze_widget with this widgetCode:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}

Parameters:

  • widgetCode (required): Flutter widget code
  • checkAccessibility (optional): Check accessibility (default: true)
  • checkPerformance (optional): Check performance (default: true)

validate_flutter_docs

Validate code against official Flutter documentation.

@flutter-mcp use validate_flutter_docs with this code:
Container(
  color: Colors.red,
  decoration: BoxDecoration(color: Colors.blue), // This will be flagged
)

Parameters:

  • code (required): Flutter/Dart code
  • widgetType (optional): Specific widget to focus on

analyze_pub_package

Analyze packages from pub.dev for quality and compatibility.

@flutter-mcp use analyze_pub_package with packageName "provider"
@flutter-mcp use analyze_pub_package with packageName "dio" and checkDependencies true

Parameters:

  • packageName (required): Package name from pub.dev
  • checkDependencies (optional): Analyze dependencies (default: true)
  • checkScores (optional): Retrieve pub.dev scores (default: true)

suggest_improvements

Get improvement suggestions based on Flutter best practices.

@flutter-mcp use suggest_improvements for this code:
ListView(
  children: List.generate(1000, (i) => Text('Item $i')),
)

Parameters:

  • code (required): Flutter code
  • focusArea (optional): "performance", "accessibility", "maintainability", "all"

analyze_performance

Analyze Flutter widget tree for performance issues.

@flutter-mcp use analyze_performance with this widgetTree:
Column(
  children: [
    for (int i = 0; i < 100; i++)
      Container(child: Text('Item $i')),
  ],
)

Parameters:

  • widgetTree (required): Widget tree code
  • checkRebuildOptimization (optional): Check rebuilds (default: true)
  • checkMemoryLeaks (optional): Check memory leaks (default: true)

analyze_architecture

Analyze project architecture compliance.

@flutter-mcp use analyze_architecture with projectStructure {
  "lib": {
    "features": ["auth", "home", "profile"],
    "core": ["network", "database"],
    "shared": ["widgets", "utils"]
  }
} and pattern "clean"

Parameters:

  • projectStructure (required): Project directory structure
  • pattern (optional): "clean", "mvvm", "mvc", "auto"
  • checkDependencies (optional): Check dependency violations (default: true)

analyze_bundle_size

Analyze app bundle size with optimization recommendations.

@flutter-mcp use analyze_bundle_size with buildPath "/path/to/build" and platform "android"

Parameters:

  • buildPath (required): Path to build output
  • platform (optional): "android", "ios", "web", "all"
  • includeAssets (optional): Include asset analysis (default: true)

generate_tests

Generate comprehensive Flutter tests.

@flutter-mcp use generate_tests for this widgetCode:
class CounterButton extends StatelessWidget {
  final VoidCallback onPressed;
  final int count;
  
  const CounterButton({required this.onPressed, required this.count});
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('Count: $count'),
    );
  }
}

Parameters:

  • widgetCode (required): Widget code
  • testType (optional): "unit", "widget", "integration", "golden", "all"
  • includeAccessibility (optional): Include accessibility tests (default: true)

trace_state

Trace state flow and rebuilds in Flutter widgets.

@flutter-mcp use trace_state with this widgetCode:
class MyStatefulWidget extends StatefulWidget {
  // ... widget code
}

Parameters:

  • widgetCode (required): Widget code
  • traceRebuildPaths (optional): Trace rebuilds (default: true)
  • generateVisualization (optional): Generate visualization (default: true)

generate_clean_architecture

Generate Clean Architecture structure.

@flutter-mcp use generate_clean_architecture with projectName "todo_app" and features ["auth", "todos", "settings"]

Parameters:

  • projectName (required): Project/feature name
  • features (required): List of features
  • stateManagement (optional): "riverpod", "bloc", "provider", "getx"
  • includeDI (optional): Include dependency injection (default: true)

generate_l10n

Generate localization setup with ARB files.

@flutter-mcp use generate_l10n with languages ["en", "es", "fr"]

Parameters:

  • languages (required): Language codes to support
  • translations (optional): Initial translations
  • includeRTL (optional): Include RTL support (default: true)
  • includePluralization (optional): Include pluralization (default: true)

monitor_performance

Generate performance monitoring setup.

@flutter-mcp use monitor_performance with monitoringType "balanced"

Parameters:

  • monitoringType (required): "comprehensive", "balanced", "lightweight"
  • includeNetwork (optional): Monitor network (default: true)
  • includeMemory (optional): Monitor memory (default: true)
  • includeAnalytics (optional): Include analytics (default: true)

diagnose_render_issues

Diagnose and fix rendering issues.

@flutter-mcp use diagnose_render_issues with this widgetCode:
Row(
  children: [
    Expanded(child: Text('Long text')),
    Container(width: double.infinity), // This will cause issues
  ],
)

Parameters:

  • widgetCode (required): Widget code with issues
  • errorType (optional): "overflow", "constraint", "layout", "all"
  • includeVisualization (optional): Include debug visualization (default: true)

analyze_test_coverage

Analyze test coverage with recommendations.

@flutter-mcp use analyze_test_coverage with coverageData {...} and targetCoverage 80

Parameters:

  • coverageData (required): Coverage data from lcov
  • projectStructure (required): Project file structure
  • targetCoverage (optional): Target percentage (default: 80)
  • generateReport (optional): Generate visual report (default: true)

Usage Examples

Basic Widget Analysis

@flutter-mcp analyze this Flutter widget for issues:
Container(
  child: Column(
    children: List.generate(100, (i) => Text('Item $i')),
  ),
)

Package Research

@flutter-mcp search for "state management" packages and analyze the top result

Performance Optimization Workflow

1. @flutter-mcp analyze_performance for my widget tree
2. @flutter-mcp suggest_improvements based on performance issues
3. @flutter-mcp generate_tests for the optimized code

Full Project Analysis

@flutter-mcp analyze_architecture for my project and suggest clean architecture improvements

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "flutter-mcp" '{"command":"node","args":["/absolute/path/to/flutter_mcp_service/src/index.js"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "flutter-mcp": {
            "command": "node",
            "args": [
                "/absolute/path/to/flutter_mcp_service/src/index.js"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "flutter-mcp": {
            "command": "node",
            "args": [
                "/absolute/path/to/flutter_mcp_service/src/index.js"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect

Want to 10x your AI skills?

Get a free account and learn to code + market your apps using AI (with or without vibes!).

Nah, maybe later