pub version License GitHub stars Coverage

Pub likes Pub points Pub downloads

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), or compare two widgets to measure the pixel gap between them.

A standalone package. It works on its own, without the rest of the ISpect toolkit.

What it surfaces

  • Render box: size, padding, constraints, hit-test path visualisation.
  • Decoration: colour, per-side border, shadows (including spreadRadius), gradients (visual preview, stops, begin / end, tileMode), and 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, and the rest), each ancestor's properties appear as a separate sub-section.
  • Compare mode: tap Compare (or press Alt+Y) and pick a second widget to see horizontal and 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-dev53

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 so they do not collide with normal typing:

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

Panel state and value precision are configured on Inspector itself:

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), with 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. Pick the packages your project needs. Each one works on its own.

Package What it does
ispect Flutter UI: debug panel, log viewer, navigation observer, inspector integration.
ispect_layout Visual layout inspector with sizes, constraints, decorations, compare mode, and a 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 for SQL, ORMs, and KV stores.
ispectify_bloc BLoC event, state, transition, and error observer.

Contributing

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

License

MIT. See LICENSE.

Contributors

Libraries

ispect_layout