flutter_widget_inspector

A runtime Flutter widget inspector — long-press to activate, then tap any widget to see its full layout information. No modifications to your widget tree required.

Works like browser DevTools Inspect Element, but inside your Flutter app.

---

✨ Features

Feature	Details
Zero-config activation	Long-press anywhere to toggle inspect mode
Tap to inspect	Shows info for the most specific widget under your finger
Layout section	Render type, size, position, constraints, padding, depth, opacity
Text section	Font size, weight, style, colour, letter spacing, line height
Decoration section	Background colour, border radius, border, box shadow
Draggable panel	Drag the dark info panel anywhere on screen
Animated badge	Blue → red badge confirms mode state
Zero-cost disable	enabled: false returns child directly — no extra widgets

---

🚀 Installation

dependencies:
  flutter_widget_inspector: ^0.1.0

flutter pub get

---

🔧 Usage

import 'package:flutter/foundation.dart';
import 'package:flutter_widget_inspector/flutter_widget_inspector.dart';

MaterialApp(
  home: WidgetInspectorWrapper(
    enabled: kDebugMode, // disables automatically in release builds
    child: const MyHomePage(),
  ),
);

Gestures

Gesture	Action
Long-press	Toggle inspection mode
Tap (inspect mode)	Select and highlight a widget
Drag panel	Move the info panel
Tap ✕	Deselect current widget

---

📡 API Reference

WidgetInspectorWrapper

WidgetInspectorWrapper({
  required Widget child,
  bool enabled = true,
})

Parameter	Default	Description
child	—	The widget tree to wrap
enabled	true	false = zero overhead, wrapper is transparent

WidgetInfo (public model)

class WidgetInfo {
  final String renderType;   // e.g. "RenderParagraph"
  final Size size;           // painted size in logical pixels
  final Offset globalPosition;
  final BoxConstraints constraints;
  final int depth;           // depth in render tree

  // Text (RenderParagraph only)
  final String? textContent;
  final double? fontSize;
  final String? fontWeight;  // e.g. "w700 (Bold)"
  final String? textColor;   // e.g. "#FF3B30"

  // Decoration (RenderDecoratedBox only)
  final String? backgroundColor;
  final String? borderRadius;
  final String? border;

  // Convenience getters
  String get sizeLabel;        // "320.0 × 48.0"
  String get positionLabel;    // "(12.0, 80.5)"
  String get constraintsLabel; // "tight 320 × 48"
  Rect   get globalRect;
}

---

🏗️ Architecture

Long-press / Tap
     │
     ▼
WidgetInspectorWrapper     manages _inspecting / _selected state
     │
     ├── RenderSearch.find()        BoxHitTestResult → smallest-area RenderBox
     │         └── WidgetInfo.fromRenderBox()   captures all properties
     │
     └── InspectorOverlay
               ├── Positioned + IgnorePointer   red highlight border
               ├── Positioned.fill + CustomPaint  dashed ruler lines
               └── Positioned + GestureDetector   draggable _InfoPanel

---

⚡ Debug-only (recommended)

import 'package:flutter/foundation.dart';

WidgetInspectorWrapper(
  enabled: kDebugMode,
  child: const MyApp(),
);

When enabled: false, the wrapper is completely removed from the widget tree.

---

📋 Requirements

• Flutter >=3.10.0
• Dart >=3.0.0
• No third-party runtime dependencies

---

📄 License

MIT © 2026 flutter_widget_inspector contributors