ispect_layout 5.0.0-dev42

Visual layout inspector for Flutter — inspect sizes, paddings, decorations, transforms, text styles, and compare widgets side-by-side at runtime.

ispect_layout is a visual layout inspector for Flutter — tap any widget at runtime to read its render box (size, constraints, padding, decoration, text styles, transform matrix, clip shape) and compare two widgets side-by-side to measure the pixel gap between them.

Standalone package — works independently of the rest of the ISpect toolkit.

What it surfaces

• Render box: size, padding, constraints, and hit-test path visualisation.
• Decoration: colour, per-side border, shadows (incl. spreadRadius), gradients (visual preview, stops, begin / end, tileMode), DecorationImage.
• Border radius formatted per corner (TL / TR / BR / BL), collapsed when uniform, elliptical radii rendered as x×y.
• Text: plain-text preview, span-by-span style breakdown, didExceedMaxLines, maxLines, overflow, textScaler.
• Render-object coverage: RenderFlex, RenderStack, RenderWrap, RenderImage, RenderOpacity / RenderAnimatedOpacity, RenderPhysicalShape / RenderPhysicalModel, RenderFittedBox, RenderAspectRatio, RenderCustomPaint, RenderTransform (matrix decomposition), RenderBackdropFilter, every RenderClip*, and RenderEditable (text fields).
• Wrapper ancestors: when the selection is wrapped in same-size proxies (Transform, ClipRRect, BackdropFilter, Opacity, FittedBox, …), each ancestor's properties are surfaced as a separate sub-section.
• Compare mode: tap Compare (or press Alt+Y) and pick a second widget to see horizontal / vertical gaps or LTRB offsets with a visual overlay.
• Colour picker with pixel-level sampling, ColorScheme hints, a zoom / magnifier overlay, and physical-keyboard shortcuts.

Install

dependencies:
  ispect_layout: ^5.0.0-dev42

Quick start

import 'package:flutter/material.dart';
import 'package:ispect_layout/ispect_layout.dart';

void main() {
  runApp(
    MaterialApp(
      home: const MyApp(),
      builder: (context, child) => Inspector(
        isEnabled: true, // typically `kDebugMode`.
        child: child!,
      ),
    ),
  );
}

Tap the widget-inspector FAB to start selecting. Tap the Compare icon (or press Alt+Y) to lock the current selection, then tap a second widget to see the pixel distance.

Defaults and configuration

Default keyboard shortcuts are chosen to avoid interfering with normal typing:

• Alt+W — widget inspector
• Alt+Y — compare selected widget with another widget
• Alt+C — colour picker
• Alt+Z — zoom overlay

You can also configure panel state and value precision directly on Inspector:

Inspector(
  isEnabled: true,
  initialPanelExpanded: false,
  decimalPlaces: 3,
  child: child!,
)

For custom multi-key shortcuts, pass ShortcutActivators to InspectorController:

import 'package:flutter/services.dart';
import 'package:ispect_layout/ispect_layout.dart';

final controller = InspectorController(
  zoomShortcutActivators: const [
    SingleActivator(LogicalKeyboardKey.keyZ, alt: true, meta: true),
  ],
  colorPickerShortcutActivators: const [
    SingleActivator(LogicalKeyboardKey.keyC, control: true, alt: true),
  ],
);

Inspector(
  controller: controller,
  child: child!,
)

See example/lib/showcase_example.dart for a tour of every render-object type the inspector handles.

Attribution

Forked from inspector by Erzhan (kekland) — thanks for the original work. The fork continues the package with expanded render-object coverage, a wrapper-ancestors section, richer decoration breakdowns, image-source introspection, an input-fields inspector, and a refactored architecture. Inspired by inspx.

The ISpect toolkit

ISpect is a modular monorepo. Install only what your project needs — each package works independently.

Package	What it does
ispect	Flutter UI — debug panel, log viewer, navigation observer, inspector integration
ispect_layout	Visual layout inspector — sizes, constraints, decorations, compare mode, color picker
ispectify	Pure-Dart logging core — typed log entries, filtering, tracing, observers
ispectify_dio	Dio HTTP interceptor with automatic redaction
ispectify_http	http package interceptor with automatic redaction
ispectify_ws	WebSocket traffic capture with automatic redaction
ispectify_db	Database operation tracing (SQL, ORM, KV stores)
ispectify_bloc	BLoC event / state / transition observer

Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines, and open issues or pull requests at the ISpect repository.

License

MIT — see LICENSE.

---