Flutter Dev Panel

A powerful, zero-intrusion debugging panel for Flutter applications with modular architecture and real-time monitoring capabilities.

中文文档 | Getting Started | Configuration

📸 Screenshots

✨ Features

• 🚀 Zero Intrusion - No impact on production code, automatic tree-shaking in release builds
• 📦 Modular Design - Install only the modules you need
• 🔧 Environment Management - Switch environments on-the-fly with .env support
• 🎨 Theme Sync - Bidirectional theme synchronization with your app
• 📱 Multiple Triggers - FAB, shake gesture, or programmatic access
• ⚡ High Performance - Minimal overhead with smart optimization

🎯 Available Modules

Module	Description	Features
Console	Advanced logging system	• Real-time log capture (print, debugPrint, Logger) • Log level filtering • Search functionality • Smart multi-line merging
Network	HTTP & GraphQL monitoring	• Request/response tracking • GraphQL operation monitoring • JSON viewer with syntax highlighting • Support for Dio, HTTP, GraphQL
Performance	Resource monitoring	• Real-time FPS tracking • Memory leak detection • Automatic Timer tracking • Performance analysis
Device	System information	• Device specifications • Screen metrics & PPI • Platform details • App package info

🚀 Quick Start

Installation

dependencies:
  flutter_dev_panel: ^1.1.0
  
  # Add modules as needed
  flutter_dev_panel_console: ^1.1.0    # Logging
  flutter_dev_panel_network: ^1.1.0    # Network monitoring
  flutter_dev_panel_performance: ^1.1.0 # Performance tracking
  flutter_dev_panel_device: ^1.1.0      # Device info

Basic Setup

import 'package:flutter_dev_panel/flutter_dev_panel.dart';
import 'package:flutter_dev_panel_console/flutter_dev_panel_console.dart';
import 'package:flutter_dev_panel_network/flutter_dev_panel_network.dart';

void main() async {
  // Initialize with automatic Zone setup for full functionality
  await DevPanel.init(
    () => runApp(const MyApp()),
    modules: [
      const ConsoleModule(),     // Auto-captures print statements
      NetworkModule(),           // HTTP/GraphQL monitoring
      const PerformanceModule(), // Auto-tracks Timers
    ],
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        // Wrap your app with DevPanelWrapper
        return DevPanelWrapper(
          child: child ?? const SizedBox.shrink(),
        );
      },
      home: MyHomePage(),
    );
  }
}

🔧 Integration Examples

Network Monitoring

// Dio
final dio = Dio();
NetworkModule.attachToDio(dio);

// GraphQL
final link = NetworkModule.createGraphQLLink(
  HttpLink('https://api.example.com/graphql'),
);
final client = GraphQLClient(link: link, cache: GraphQLCache());

// HTTP
final client = NetworkModule.createHttpClient();

Environment Management

// Get environment values
final apiUrl = DevPanel.environment.getString('api_url');
final isDebug = DevPanel.environment.getBool('debug');

// Listen to changes
DevPanel.environment.addListener(() {
  // Update your services when environment changes
});

Access Methods

// Programmatic access
DevPanel.open(context);

// Via floating action button (default)
// Via shake gesture on mobile
// Configure in DevPanelConfig

📖 Documentation

Guide	Description
Getting Started	Installation, setup, and initialization methods
Configuration	Environment variables, module configuration
Network Integration	Dio, HTTP, and GraphQL setup
Environment Usage	Working with environment variables
GraphQL Guide	Dynamic GraphQL endpoint switching

🛡️ Production Safety

Flutter Dev Panel is designed with production safety as a priority:

# Normal release build (panel disabled, zero overhead)
flutter build apk --release

# Internal testing build (panel enabled)
flutter build apk --release --dart-define=FORCE_DEV_PANEL=true

• Debug Mode: Automatically enabled
• Release Mode: Completely removed by tree-shaking
• Force Enable: Optional for internal testing builds

📄 License

MIT License - see LICENSE file for details