# Flutter Devtools

> Guide for utilizing Flutter DevTools, using visual debugging properties, and exposing custom widget states to the inspector.

- **Type:** Skill
- **Install:** `agentstack add skill-dhruvanbhalara-skills-flutter-devtools`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dhruvanbhalara](https://agentstack.voostack.com/s/dhruvanbhalara)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dhruvanbhalara](https://github.com/dhruvanbhalara)
- **Source:** https://github.com/dhruvanbhalara/skills/tree/main/skills/flutter/flutter-devtools
- **Website:** https://dhruvanbhalara.github.io/skills/

## Install

```sh
agentstack add skill-dhruvanbhalara-skills-flutter-devtools
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Flutter DevTools & Visual Debugging

Debugging UI, performance, and memory leaks efficiently in Flutter requires mastering the DevTools suite and utilizing framework-level debugging properties.

## Contents
- [Connecting DevTools](#connecting-devtools)
- [Visual Debugging Flags](#visual-debugging-flags)
- [Custom Widget Diagnostics (`debugFillProperties`)](#custom-widget-diagnostics-debugfillproperties)
- [Performance & Memory Profiling](#performance-memory-profiling)

---

## Connecting DevTools

Start and connect DevTools to a running Flutter application:

1. **Via CLI**: Run `flutter devtools` in the terminal to launch the DevTools web application server.
2. **Via IDE**:
   - In VS Code, open the Command Palette (`Cmd+Shift+P`) and select **Dart: Open DevTools**.
   - In Android Studio, click the **Flutter DevTools** icon in the run/debug toolbar.
3. **Execution Mode**:
   - Use **Debug Mode** for Inspector, Network, and Logging tabs.
   - Use **Profile Mode** (`flutter run --profile`) for Performance and Memory profiling. Never profile performance in Debug mode due to VM overhead.

---

## Visual Debugging Flags

Toggle these runtime properties to visually diagnose layout and rendering performance directly on the emulator/device.

Import the rendering library to access these flags:
```dart
import 'package:flutter/rendering.dart';
import 'package:flutter/foundation.dart';
```

### Key Debugging Flags

| Flag | Purpose | Usage |
|---|---|---|
| `debugPaintSizeEnabled = true` | Visualizes layout boxes, margins, padding, and alignment. | To identify misplaced padding or sizing issues. |
| `debugRepaintRainbowEnabled = true` | Overlays a rotating set of border colors on layers that repaint. | If a static widget changes colors on scroll, wrap it in a `RepaintBoundary`. |
| `debugPaintLayerBordersEnabled = true` | Outlines the borders of individual compositor layers in orange. | Useful for debugging composite layer splits. |
| `debugProfileBuildsEnabled = true` | Enables tracing for widget builds in the DevTools Performance timeline. | Tracks exactly which widgets are rebuilding during jank. |
| `debugProfilePaintsEnabled = true` | Enables tracing for paint operations in the DevTools Performance timeline. | Captures heavy paint operations on custom canvases. |

### Example Setup
```dart
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  // Toggle layout boundaries in debug mode
  debugPaintSizeEnabled = true;
  runApp(const MyApp());
}
```

---

## Custom Widget Diagnostics (`debugFillProperties`)

When building custom widgets, design system components, or stateful widgets with complex parameters, override `debugFillProperties` to expose internal state variables to the **Flutter Inspector's Details Tree**.

### Diagnostic Properties Pattern
- Override `debugFillProperties(DiagnosticPropertiesBuilder properties)` in your Widget or State class.
- **Always** call `super.debugFillProperties(properties)` first.
- Add typed properties (`IntProperty`, `DoubleProperty`, `StringProperty`, `FlagProperty`, `EnumProperty`) to keep output clean and structured.

```dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final bool isLoading;
  final int badgeCount;

  const CustomButton({
    super.key,
    required this.label,
    this.isLoading = false,
    this.badgeCount = 0,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: isLoading ? null : () {},
      child: Text(label),
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    
    // Add custom properties visible in Flutter Inspector
    properties.add(StringProperty('label', label));
    properties.add(FlagProperty('isLoading', value: isLoading, ifTrue: 'loading', ifFalse: 'ready'));
    properties.add(IntProperty('badgeCount', badgeCount, defaultValue: 0));
  }
}
```

---

## Performance & Memory Profiling

### Performance Tab
- **Flame Chart**: Shows execution time for the UI and Raster threads. Look for functions stretching horizontally to find execution bottlenecks.
- **Frame Time Budgets**:
  - **60Hz display**: < 16.6ms frame rendering time.
  - **90Hz display**: < 11.1ms frame rendering time.
  - **120Hz display**: < 8.3ms frame rendering time.

### Memory Tab
- **Heap Snapshot**: Take snapshots before and after a user flow (e.g. opening/closing a screen) to check if memory returns to baseline.
- **Leak Detection**: Look for undisposed classes, controllers, or image assets that remain in the heap after screen closure.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [dhruvanbhalara](https://github.com/dhruvanbhalara)
- **Source:** [dhruvanbhalara/skills](https://github.com/dhruvanbhalara/skills)
- **License:** MIT
- **Homepage:** https://dhruvanbhalara.github.io/skills/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dhruvanbhalara-skills-flutter-devtools
- Seller: https://agentstack.voostack.com/s/dhruvanbhalara
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.