Flutter Inspector

A universal Flutter UI/UX inspector tool for runtime debugging
Inspect any UI element like Chrome DevTools - shows details on mobile screen and terminal

---

Features

Feature	Description
🔍 Runtime Inspection	Inspect any UI element at runtime
📱 Mobile Screen Details	See element properties directly on your phone
💻 Terminal Output	Structured logging via dart:developer
🔒 Debug Only	Only active in debug mode, no trace in release
🎨 Customizable Theme	Light and dark themes available
🔧 Configurable	Enable/disable logging, button, etc.
🖱️ Draggable Button	Move inspector button anywhere on screen
🎯 Real-time Hover	Element highlights as you move your finger

---

Quick Start

1. Add Dependency

# pubspec.yaml
dependencies:
  flutter_inspector:
    path: /path/to/flutter_inspector

2. Run pub get

flutter pub get

3. Wrap Your App

import 'package:flutter_inspector/flutter_inspector.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterInspector(
      child: MaterialApp(
        home: YourApp(),
      ),
    );
  }
}

4. Run Your App

flutter run

That's it! Inspector button will appear automatically in debug mode.

---

How It Works

Debug Mode

┌─────────────────────────────────────┐
│  Your App Content                   │
│                                     │
│  ┌─────────────────────────────┐    │
│  │  Inspector Button (🔍)      │    │
│  │  - Draggable                │    │
│  │  - Tap to activate          │    │
│  └─────────────────────────────┘    │
│                                     │
│  When activated:                    │
│  - Move finger to hover elements    │
│  - See tooltip with element name    │
│  - Tap to select and see details    │
│                                     │
└─────────────────────────────────────┘

Release Mode

┌─────────────────────────────────────┐
│  Your App Content                   │
│                                     │
│  (No inspector, no button, no code) │
│                                     │
└─────────────────────────────────────┘

---

Terminal Output

When you inspect an element, you'll see:

┌─────────────────────────────────────────────────────────┐
│ 🔍 Flutter Inspector - Element Details                 │
├─────────────────────────────────────────────────────────┤
│ Widget:    Container
│ Key:       null
│ Type:      RenderDecoratedBox
│ Size:      375.0 × 812.0
│ Position:  (0.0, 0.0)
│ Constraints: BoxConstraints(w=375.0, h=812.0)
│ Color:     Color(0xFF2196F3)
└─────────────────────────────────────────────────────────┘

---

Configuration Options

FlutterInspector(
  config: InspectorConfig(
    enabled: true,           // Enable/disable inspector
    showButton: true,        // Show/hide floating button
    enableLogging: true,     // Enable/disable terminal logging
    theme: InspectorTheme.dark,  // Use dark theme
  ),
  child: MyApp(),
)

InspectorConfig

Option	Type	Default	Description
enabled	bool	true	Enable/disable inspector
showButton	bool	true	Show/hide floating button
enableLogging	bool	true	Enable/disable terminal logging
theme	InspectorTheme	InspectorTheme()	Custom theme

InspectorTheme

const InspectorTheme({
  this.highlightColor = const Color(0x332196F3),
  this.borderColor = const Color(0xFF2196F3),
  this.buttonColor = const Color(0xFF2196F3),
  this.panelBackground = const Color(0xFF1E1E1E),
  this.panelHeaderColor = const Color(0xFF2D2D2D),
  this.textColor = const Color(0xFFFFFFFF),
  this.labelColor = const Color(0xFFB0B0B0),
  this.borderWidth = 2.0,
  this.buttonSize = 56.0,
  this.borderRadius = 8.0,
})

---

Usage Examples

Basic Usage

import 'package:flutter_inspector/flutter_inspector.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterInspector(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('My App')),
          body: Center(child: Text('Hello World')),
        ),
      ),
    );
  }
}

With Dark Theme

FlutterInspector(
  config: InspectorConfig(
    theme: InspectorTheme.dark,
  ),
  child: MyApp(),
)

Disable Inspector

FlutterInspector(
  enabled: false,
  child: MyApp(),
)

Programmatic Control

// Enable inspector
FlutterInspector.enable();

// Disable inspector
FlutterInspector.disable();

// Check status
final status = getInspectorStatus();
print('Inspector: ${status['status']}');

---

Check Inspector Status

Command Line

cd your_flutter_project
/path/to/flutter_inspector/check_inspector.sh

Dart Code

import 'package:flutter_inspector/flutter_inspector.dart';

void main() {
  // Check inspector status
  final status = getInspectorStatus();
  print('Inspector Status: $status');
  
  // Print detailed status
  printInspectorStatus();
  
  runApp(MyApp());
}

---

Debug vs Release

Mode	Inspector Status	Button Visible	Logging Active
Debug (flutter run)	✅ Active	✅ Yes	✅ Yes
Release (flutter build)	❌ Not included	❌ No	❌ No

Build Commands

# Debug mode - Inspector active
flutter run

# Release mode - Inspector removed
flutter build apk
flutter build ios

---

Project Structure

flutter_inspector/
├── lib/
│   ├── flutter_inspector.dart          # Main export file
│   ├── src/
│   │   ├── inspector_overlay.dart      # Main overlay widget
│   │   ├── inspector_service.dart      # Terminal logging
│   │   ├── inspector_theme.dart        # Custom themes
│   │   └── inspector_config.dart       # Configuration
│   └── widgets/
│       ├── inspector_button.dart       # Draggable floating button
│       ├── highlight_border.dart       # Element highlight
│       └── element_details_card.dart   # Details panel
├── example/
│   └── main.dart                       # Demo app
├── check_inspector.sh                  # Check script
├── pubspec.yaml
└── README.md

---

Features in Detail

1. Draggable Inspector Button

• Position: Start at top-left, drag anywhere
• Tap: Activate inspection mode
• Drag: Move without activating
• Visual: Circle with search icon

2. Real-time Element Hover

• Hover: Move finger to highlight elements
• Tooltip: Shows element name and size
• Border: Blue border around hovered element

3. Element Selection

• Tap: Select highlighted element
• Details Panel: Shows at bottom with:
  • Widget type
  • Size (width × height)
  • Position (x, y)
  • Constraints
  • Padding
  • Color
• Close: Tap close button to deselect

4. Terminal Logging

• Format: Structured with borders
• Content: Widget type, size, position, properties
• Library: dart:developer for structured logging

---

Troubleshooting

Issue: Inspector button not showing

Solution: Make sure you're running in debug mode

flutter run

Issue: Element detection not working

Solution: Try tapping directly on the element

Issue: No terminal output

Solution: Check if logging is enabled

FlutterInspector(
  config: InspectorConfig(
    enableLogging: true,
  ),
  child: MyApp(),
)

---

Contributing

See CONTRIBUTING.md for details.

License

MIT License - See LICENSE for details.

Author

Created with ❤️ for the Flutter community