Flutter Advanced DevTools πŸ› οΈ

pub package License: MIT Flutter

A comprehensive, production-ready developer tools package for Flutter applications. Boost your development workflow with powerful debugging, network monitoring, performance tracking, and customizable theming.

πŸ“Έ Screenshots

Main Screen Network Logger Performance Monitor

Environment Switcher Network Details Permissions

✨ Features

Feature Description
🎨 Customizable Theme Match your app's branding with preset or custom themes
🌐 Environment Switcher Switch between Dev/Staging/Production environments on-the-fly
πŸ“‘ Network Logger Full HTTP request/response tracking with Dio integration
πŸ‘€ User Info View auth tokens, user data, and device information
⚑ Performance Monitor Real-time CPU, RAM, and FPS tracking
πŸ”” Push Notifications Test and debug Firebase Cloud Messaging
πŸ’Ύ Storage Inspector Browse and inspect cached/stored data
πŸ” Permissions Manager Check and request app permissions
πŸ“’ UI Event Logger Track toasts, dialogs, and user interactions
⚠️ Exception Logger Catch and view runtime errors
βš™οΈ Debug Settings Hot reload, debug paint, performance overlay & more

πŸ“¦ Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_advanced_devtools: ^0.1.0

Then run:

flutter pub get

πŸš€ Quick Start

1. Basic Setup

import 'package:flutter/material.dart';
import 'package:flutter_advanced_devtools/flutter_advanced_devtools.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize DevTools with your custom environments
  await DevToolsConfig().init(
    environments: [
      const Environment(
        name: 'Development',
        baseUrl: 'https://api.dev.yourapp.com/',
        description: 'Development server',
      ),
      const Environment(
        name: 'Staging',
        baseUrl: 'https://api.staging.yourapp.com/',
        description: 'Staging server for QA',
      ),
      const Environment(
        name: 'Production',
        baseUrl: 'https://api.yourapp.com/',
        description: 'Production server',
        isProduction: true,
      ),
    ],
  );
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DevToolsWrapper(
      child: MaterialApp(
        title: 'My App',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const HomePage(),
      ),
    );
  }
}

2. Customize Theme (Optional)

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final config = DevToolsConfig();
  await config.init();
  
  // Option 1: Use preset themes
  config.setTheme(DevToolsTheme.purple());
  
  // Option 2: Generate from your app color
  config.setTheme(DevToolsTheme.fromAppColor(Color(0xFF6200EE)));
  
  // Option 3: Fully custom theme
  config.setTheme(DevToolsTheme(
    primaryColor: Color(0xFF1976D2),
    secondaryColor: Color(0xFF64B5F6),
    successColor: Color(0xFF4CAF50),
    warningColor: Color(0xFFFF9800),
    errorColor: Color(0xFFF44336),
  ));
  
  runApp(const MyApp());
}

πŸ“‘ Network Logger Integration with Dio

The Network Logger automatically captures ALL HTTP requests/responses made through your Dio instance, regardless of where in your app they originate.

Step 1: Create Your Dio Helper

import 'package:dio/dio.dart';
import 'package:flutter_advanced_devtools/flutter_advanced_devtools.dart';

class DioHelper {
  static late Dio dio;

  static void init() {
    dio = Dio(BaseOptions(
      baseUrl: DevToolsConfig().currentBaseUrl,
      connectTimeout: const Duration(seconds: 30),
      receiveTimeout: const Duration(seconds: 30),
      receiveDataWhenStatusError: true,
    ));

    // πŸ”₯ Add NetworkLoggerInterceptor to capture all network activity
    if (DevToolsConfig().isDioLoggerEnabled) {
      dio.interceptors.add(NetworkLoggerInterceptor());
    }

    // Add other interceptors (auth, retry, etc.)
    // dio.interceptors.add(AuthInterceptor());
  }

  static Future<void> reinitialize() async {
    // Update base URL when environment changes
    dio.options.baseUrl = DevToolsConfig().currentBaseUrl;
    
    // Re-add interceptors
    dio.interceptors.clear();
    if (DevToolsConfig().isDioLoggerEnabled) {
      dio.interceptors.add(NetworkLoggerInterceptor());
    }
  }
}

Step 2: Initialize in main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize DevTools with reinitialize callback
  await DevToolsConfig().init(
    onReinitializeDio: DioHelper.reinitialize, // Called when settings change
    environments: [
      // Your environments...
    ],
  );
  
  // Initialize Dio with interceptor
  DioHelper.init();
  
  runApp(const MyApp());
}

Step 3: Make Requests Anywhere

// In your repositories, services, or anywhere in your app
class UserRepository {
  Future<List<User>> getUsers() async {
    try {
      final response = await DioHelper.dio.get('/users');
      // βœ… This request is automatically logged in DevTools!
      return (response.data as List)
          .map((json) => User.fromJson(json))
          .toList();
    } catch (e) {
      // βœ… Errors are also logged!
      rethrow;
    }
  }

  Future<User> createUser(Map<String, dynamic> data) async {
    final response = await DioHelper.dio.post('/users', data: data);
    // βœ… POST requests are logged with request/response bodies!
    return User.fromJson(response.data);
  }
}

What Gets Logged?

The Network Logger captures:

  • βœ… All HTTP methods (GET, POST, PUT, DELETE, PATCH, etc.)
  • βœ… Request details (URL, headers, body)
  • βœ… Response details (status code, headers, body)
  • βœ… Timing (request duration in milliseconds)
  • βœ… Errors (network failures, timeouts, server errors)
  • βœ… Request origin (doesn't matter where in your app it's called from!)

View Network Logs

  1. Shake your device 3 times (or tap the DevTools FAB)
  2. Navigate to the "Network" tab
  3. See all requests in real-time with:
    • Method badges (GET, POST, etc.)
    • Status codes with color coding
    • Request/response times
    • Full request/response inspection
    • Copy/share functionality

🎯 How to Access DevTools

Shake your device 3 times within 1 second to toggle DevTools.

Method 2: Floating Action Button

Tap the floating developer button (visible in debug/profile builds).

Method 3: Programmatic

// Trigger from your code (useful for custom gestures)
DevToolsService().toggleOverlay();

πŸ“– Feature Details

🌐 Environment Switching

Switch between environments in real-time without rebuilding:

// Define environments during initialization
await DevToolsConfig().init(
  environments: [
    Environment(
      name: 'Local',
      baseUrl: 'http://localhost:3000/',
      description: 'Local development server',
    ),
    Environment(
      name: 'Development',
      baseUrl: 'https://api.dev.example.com/',
      description: 'Remote dev server',
    ),
    Environment(
      name: 'Production',
      baseUrl: 'https://api.example.com/',
      description: 'Live server',
      isProduction: true,
    ),
  ],
);

Features:

  • Switch environments from DevTools UI
  • Automatically reinitializes Dio with new base URL
  • Persists selection across app restarts
  • Custom environment support

⚑ Performance Monitoring

Real-time performance metrics updated every 2 seconds:

Metric Description
Memory Current RAM usage (MB)
CPU Estimated CPU load (0-100%)
FPS Frame rate & dropped frames 
// Access performance data programmatically
final stats = PerformanceMonitor().getCurrentStats();
print('Memory: ${stats.memoryUsageMB} MB');
print('CPU: ${stats.cpuUsage}%');
print('FPS: ${stats.fps}');

πŸ“’ UI Event Logger

Automatically tracks user interactions:

import 'package:flutter_advanced_devtools/flutter_advanced_devtools.dart';

// Manually log custom events
UIEventLogger().logEvent(
  type: UIEventType.custom,
  message: 'User completed onboarding',
  data: {'step': 3, 'time_spent': '2m 34s'},
);

Auto-logged events:

  • Button taps
  • Navigation changes
  • Toasts/SnackBars
  • Dialog displays
  • Custom user actions

⚠️ Exception Logger

Catch and view all runtime errors:

void main() async {
  // Initialize exception handling
  FlutterError.onError = (FlutterErrorDetails details) {
    ExceptionLogger().logException(
      details.exception,
      details.stack,
      context: 'Flutter Framework Error',
    );
  };

  runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await DevToolsConfig().init();
    runApp(const MyApp());
  }, (error, stack) {
    ExceptionLogger().logException(error, stack, context: 'Async Error');
  });
}

πŸ” Permissions Manager

View and request app permissions:

// The DevTools UI automatically shows:
// - Camera, Location, Storage, Notifications, etc.
// - Current permission status
// - Request button for denied permissions

Requires permission_handler package (already included).

πŸ”” Firebase Debugging

Test push notifications without external tools:

  1. View current FCM token
  2. Copy token for testing
  3. Check notification permissions
  4. View last notification payload
  5. Test local notifications

βš™οΈ Configuration

Build-Mode Behavior

DevTools automatically adjusts based on build mode:

Build Mode DevTools Network Logger Performance Monitor
Debug βœ… Enabled βœ… Enabled βœ… Enabled
Profile βœ… Enabled ⚠️ Optional βœ… Enabled
Release ❌ Disabled ❌ Disabled ❌ Disabled

No code changes needed! DevTools is automatically disabled in release builds.

Advanced Configuration

final config = DevToolsConfig();

// Check current state
print('Build Mode: ${DevToolsConfig.buildModeString}');
print('Base URL: ${config.currentBaseUrl}');
print('Logger Enabled: ${config.isDioLoggerEnabled}');
print('Environment: ${config.currentEnvironmentName}');

// Toggle features
await config.setDioLoggerEnabled(false);
await config.setNetworkAnalysisEnabled(true);

// Reset to defaults
await config.resetToDefault();

// Get environment info
final info = config.getEnvironmentInfo();

🌍 Localization

Built-in support for:

  • βœ… English (EN)
  • βœ… Arabic (AR) with full RTL support

203+ translation keys covering all DevTools features.

To add your own language, extend the localization files in assets/lang/.

🎨 Theme Customization

Preset Themes

DevToolsTheme.material()  // Blue (Material Design)
DevToolsTheme.green()     // Green
DevToolsTheme.orange()    // Orange
DevToolsTheme.purple()    // Purple
DevToolsTheme.red()       // Red
DevToolsTheme.teal()      // Teal
DevToolsTheme.dark()      // Dark mode

Auto-Generate from App Color

// Automatically creates a harmonious theme
config.setTheme(DevToolsTheme.fromAppColor(
  Theme.of(context).primaryColor,
));

Fully Custom Theme

config.setTheme(DevToolsTheme(
  primaryColor: Color(0xFF1E88E5),
  secondaryColor: Color(0xFF64B5F6),
  successColor: Color(0xFF43A047),
  warningColor: Color(0xFFFB8C00),
  errorColor: Color(0xFFE53935),
  backgroundColor: Color(0xFFFAFAFA),
  textColor: Color(0xFF212121),
  cardColor: Colors.white,
  borderRadius: 12.0,
  elevation: 4.0,
));

πŸ—οΈ Package Structure

flutter_advanced_devtools/
β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ flutter_advanced_devtools.dart      # Main export file
β”‚   β”œβ”€β”€ dev_tools_config.dart                # Configuration & state
β”‚   β”œβ”€β”€ dev_tools_theme.dart                 # Theme system
β”‚   β”œβ”€β”€ dev_tools_preferences.dart           # Persistent storage
β”‚   β”œβ”€β”€ dev_tools_service.dart               # Core service
β”‚   β”œβ”€β”€ network_logger.dart                  # HTTP interceptor πŸ”₯
β”‚   β”œβ”€β”€ exception_logger.dart                # Error tracking
β”‚   β”œβ”€β”€ ui_event_logger.dart                 # UI event tracking
β”‚   β”œβ”€β”€ performance_monitor.dart             # Performance metrics
β”‚   β”œβ”€β”€ firebase_debug_service.dart          # FCM debugging
β”‚   └── widgets/
β”‚       β”œβ”€β”€ dev_tools_wrapper.dart           # Root wrapper
β”‚       β”œβ”€β”€ dev_tools_overlay.dart           # Main UI
β”‚       β”œβ”€β”€ dev_tools_fab.dart               # Floating button
β”‚       └── dev_toast.dart                   # Custom toasts
β”œβ”€β”€ assets/
β”‚   └── lang/
β”‚       β”œβ”€β”€ en.json                          # English translations
β”‚       └── ar.json                          # Arabic translations
└── example/                                 # Example app

πŸ“š Examples

Check out the /example folder for complete examples:

  • βœ… Basic Setup - Minimal integration
  • βœ… Dio Integration - Full network logging
  • βœ… Custom Theming - Theme customization
  • βœ… Environment Switching - Multi-environment setup
  • βœ… Advanced Configuration - All features enabled

πŸ”§ Dependencies

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0                               # For network interceptor
  device_info_plus: ^9.0.0                  # Device information
  package_info_plus: ^4.0.0                 # App version info
  permission_handler: ^11.0.0               # Permissions
  firebase_messaging: ^14.0.0               # FCM support
  flutter_local_notifications: ^16.0.0      # Local notifications
  sensors_plus: ^4.0.0                      # Shake detection
  share_plus: ^7.0.0                        # Share logs
  shared_preferences: ^2.0.0                # Persistent storage

🀝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Inspired by modern developer tools and debugging practices
  • Built with ❀️ for the Flutter community
  • Special thanks to all contributors

πŸ“ž Support

🌟 Show Your Support

If this package helped you, please give it a ⭐️ on GitHub!

Made with ❀️ for Flutter developers worldwide

Libraries

dev_tools
dev_tools_config
dev_tools_preferences
dev_tools_service
dev_tools_theme
exception_logger
firebase_debug_service
flutter_advanced_devtools
network_logger
performance_monitor
ui_event_logger
widgets/dev_toast
widgets/dev_tools_fab
widgets/dev_tools_overlay
widgets/dev_tools_wrapper