flutter_dev_panel 1.1.2 copy "flutter_dev_panel: ^1.1.2" to clipboard
flutter_dev_panel: ^1.1.2 copied to clipboard

A comprehensive Flutter debug panel for development with network monitoring, performance tracking, and environment switching.

Flutter Dev Panel #

pub package License: MIT

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

中文文档 | Getting Started | Configuration

📸 Screenshots #

Console Log Detail Environment Settings
network-module-overview Network Response Performance

✨ 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.2
  
  # Add modules as needed
  flutter_dev_panel_console: ^1.1.2    # Logging
  flutter_dev_panel_network: ^1.1.2    # Network monitoring
  flutter_dev_panel_performance: ^1.1.2 # Performance tracking
  flutter_dev_panel_device: ^1.1.2      # 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

3
likes
130
points
418
downloads

Publisher

unverified uploader

Weekly Downloads

A comprehensive Flutter debug panel for development with network monitoring, performance tracking, and environment switching.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_dotenv, sensors_plus, shared_preferences

More

Packages that depend on flutter_dev_panel