A Flutter package for inspecting widgets

Share Your Love

A Flutter package for inspecting widgets. Also comes with an eyedropper functionality. Useful for debugging widgets and for QA testing.

Supports keyboard shortcuts if you’re using a physical keyboard.

Inspired by inspx.

WIP:

Warning, the development of this package is still in progress and some things may break your app.

Features:

  • Color picker
  • Size inspection
  • Padding inspection
  • Keyboard shortcuts
  • BorderRadius inspection
  • TextStyle inspection

Installing

Add the dependency:

$ flutter pub add inspector

Import the package:

import 'package:inspector/inspector.dart';

Wrap MaterialApp.builder or WidgetsApp.builder with Inspector:

MaterialApp(
  home: ExampleApp(),
  builder: (context, child) => Inspector(child: child!), // Wrap [child] with [Inspector]
),

Optionally, you can pass isEnabled to the Inspector to disable it. By default, the inspector is disabled when kReleaseMode == true.

Usage

If the inspector is enabled, then a panel appears on the right side of the screen,
with buttons to toggle size inspection and the colour picker.

It’s quite straightforward to use, just tap on the widget that you want to measure
or tap on the pixel to get its colour.

You can also use keyboard shortcuts – Shift will toggle the colour picker, and
Alt or Cmd will toggle the widget inspector.

Examples:

screenshot 1
screenshot 2

GitHub:

Source: https://github.com/kekland/inspector?ref=flutterawesome.com

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 411

Newsletter Updates

Enter your email address below to subscribe to our newsletter