📋 Table of Contents #

✨ Features #

📸 Screenshots #

🖼️ App Screenshots Gallery #

🎯 Floating Logger Button Always accessible debug interface	🌐 API Logs View Comprehensive API request/response logging
📊 General Logs View Beautiful log interface with filtering	🔍 Log Details Detailed log inspection with syntax highlighting

🚀 Getting Started #

Installation #

dependencies:
  flutter_awesome_logger: ^latest_version

# Using Flutter CLI
flutter pub get

# Or using Dart CLI
dart pub get

import 'package:flutter_awesome_logger/flutter_awesome_logger.dart';

Basic Usage #

⚡ Easiest Setup (Just 2 Lines!)

The absolute simplest way to get started - just wrap your app:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlutterAwesomeLogger(
        child: YourHomePage(), // Your existing home page
      ),
    );
  }
}

That's it! 🎉 The logger is now active with default settings. You'll see:

• 📱 Floating logger button on your screen
• 🤳 Shake-to-toggle functionality enabled
• 📊 Both API logs and general logs tabs ready

📋 How to Get Logs in Each Tab #

🌐 API Logs Tab #

For HTTP requests and responses

To populate the API Logs tab with your HTTP requests, add the Dio interceptor:

Step 1: Add the interceptor to your Dio instance

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

final dio = Dio();
dio.interceptors.add(FlutterAwesomeLoggerDioInterceptor());

// Now all API calls are automatically logged!
final response = await dio.get('https://api.example.com/data');

What you get:

• ✅ Automatic capture - All requests and responses logged automatically
• ✅ cURL generation - Copy-paste ready cURL commands for testing
• ✅ Error handling - Network errors and HTTP errors captured
• ✅ Performance timing - Request duration tracking
• ✅ Advanced filtering - Filter by status code, method, or endpoint
• ✅ Search functionality - Search through URLs, headers, and response content

📊 General Logs Tab #

For application logs and debugging

To populate the General Logs tab with your application logs:

Step 1: Create a logger instance // Create global logger instance (recommended: make a new file eg. my_logger.dart)

import 'package:flutter_awesome_logger/flutter_awesome_logger.dart';

final logger = FlutterAwesomeLogger.loggingUsingLogger;

Step 2: Use the logger throughout your app

import 'my_logger.dart';

class MyService {
  void performOperation() {
    // Debug information (development only)
    logger.d('Starting complex operation with parameters: $params');
    
    // General information (important events)
    logger.i('User logged in successfully');
    
    // Warnings (potential issues)
    logger.w('API rate limit approaching: ${remaining} requests left');
    
    // Errors (with full context)
    try {
      // Your code here
    } catch (e, stackTrace) {
      logger.e('Failed to process user data', error: e, stackTrace: stackTrace);
    }
  }
}

What you get:

• ✅ Multiple log levels - DEBUG (grey), INFO (blue), WARNING (orange), ERROR (red)
• ✅ Stack trace support - Full error context with file paths and line numbers
• ✅ Source tracking - See exactly which file and method generated each log
• ✅ Advanced filtering - Filter by log level, source file, or search content
• ✅ Export capabilities - Copy individual logs or export entire filtered sets
• ✅ Real-time updates - Logs appear instantly as your app runs

🚀 Auto-Configuration (Recommended)

For more control over settings, use auto-configuration:

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

// Create global logger instance using FlutterAwesomeLogger
final logger = FlutterAwesomeLogger.loggingUsingLogger;

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

class MyApp extends StatelessWidget {
  // Example: Enable logger after checking some condition
  Future<bool> _shouldEnableLogger() async {
    // Check if we're in debug mode, user preferences, etc.
    await Future.delayed(const Duration(seconds: 2)); // Simulate async check
    return true; // Or false based on your logic
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlutterAwesomeLogger(
        enabled: _shouldEnableLogger(), // Can be Future<bool> or bool
        // Auto-configure logger settings
        loggerConfig: const AwesomeLoggerConfig(
          maxLogEntries: 500,
          showFilePaths: true,
          showEmojis: true,
          useColors: true,
        ),
        // Floating logger UI configuration
        config: const FloatingLoggerConfig(
          backgroundColor: Colors.deepPurple,
          icon: Icons.developer_mode,
          showCount: true,
          enableGestures: true,
          autoSnapToEdges: true,
        ),
        child: const YourHomePage(),
      ),
    );
  }
}

Option 2: Manual Configuration (Advanced)

For more control, configure manually in main(). Note: Manual configuration doesn't automatically control log storage - use Option 1 for simpler setup.

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

// Create global logger instance using FlutterAwesomeLogger
final logger = FlutterAwesomeLogger.loggingUsingLogger;

void main() {
  // Manual configuration
  LoggingUsingLogger.configure(
    const AwesomeLoggerConfig(
      maxLogEntries: 500,
      showFilePaths: true,
      showEmojis: true,
      useColors: true,
    ),
  );

  // Manual initialization
  FloatingLoggerManager.initialize();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlutterAwesomeLogger(
        enabled: true, // Controls both floating logger AND log storage
        // Don't auto-configure since we did it manually
        config: const FloatingLoggerConfig(
          backgroundColor: Colors.deepPurple,
          icon: Icons.developer_mode,
          showCount: true,
          enableGestures: true,
          autoSnapToEdges: true,
        ),
        child: const YourHomePage(),
      ),
    );
  }
}

3. Start logging:

import 'package:flutter_awesome_logger/flutter_awesome_logger.dart';

// Create global logger instance using FlutterAwesomeLogger
final logger = FlutterAwesomeLogger.loggingUsingLogger;

// Use the logger instance anywhere in your app
logger.d('Debug message');
logger.i('Info message');
logger.w('Warning message');
logger.e('Error message');

API Logging with Dio #

After setting up the basic logger (see Easiest Setup above), add API logging:

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

// Create your Dio instance
final dio = Dio();

// Add the awesome logger interceptor - that's it!
dio.interceptors.add(FlutterAwesomeLoggerDioInterceptor());

// Now all your API calls are automatically logged in the API Logs tab!
final response = await dio.get('https://api.example.com/data');
final postResponse = await dio.post('https://api.example.com/users', data: {'name': 'John'});

💡 Pro Tip: The interceptor automatically handles all HTTP methods (GET, POST, PUT, DELETE, PATCH) and captures both successful responses and errors!

General Application Logging #

After setting up the basic logger (see Easiest Setup above), start logging in your app:

import 'package:flutter_awesome_logger/flutter_awesome_logger.dart';

// Create global logger instance (do this once, usually in main.dart)
final logger = FlutterAwesomeLogger.loggingUsingLogger;

// Use anywhere in your app
class MyService {
  void performOperation() {
    logger.d('Starting operation...'); // Debug
    
    try {
      // Your business logic
      final result = someComplexOperation();
      logger.i('Operation completed successfully: $result'); // Info
      
    } catch (e, stackTrace) {
      logger.e('Operation failed', error: e, stackTrace: stackTrace); // Error with stack trace
    }
  }
  
  void validateInput(String input) {
    if (input.isEmpty) {
      logger.w('Empty input received - using default value'); // Warning
    }
  }
}

💡 Pro Tips:

• Use logger.d() for debugging information during development
• Use logger.i() for important app events (user actions, state changes)
• Use logger.w() for recoverable issues that need attention
• Use logger.e() for actual errors, always include error and stackTrace parameters

🔧 Configuration Options #

🎛️ FlutterAwesomeLogger Configuration

enabled: true

enabled: false

enabled: someFuture()

📊 AwesomeLoggerConfig

const AwesomeLoggerConfig({
  int maxLogEntries = 1000,
  bool showFilePaths = true,
  bool showEmojis = true,
  bool useColors = true,
  int stackTraceLines = 0,
});

🎨 FloatingLoggerConfig

const FloatingLoggerConfig({
  Color backgroundColor = Colors.deepPurple,
  IconData icon = Icons.developer_mode,
  bool showCount = true,
  bool enableGestures = true,
  bool autoSnapToEdges = true,
  double size = 60.0,
  bool enableShakeToShowHideFloatingButton = true,
  bool enableShakeToEnableLogger = true,
  int shakeSensitivity = 8,
});

📚 Advanced Usage #

Logger Factory Pattern #

The package now uses a clean factory pattern for accessing the logger:

import 'package:flutter_awesome_logger/flutter_awesome_logger.dart';

// Create global logger instance (recommended approach)
final logger = FlutterAwesomeLogger.loggingUsingLogger;

// Use anywhere in your app without additional imports
class MyService {
  void doSomething() {
    logger.d('Debug message from service');
    logger.i('Info: Operation completed');
    
    try {
      // Some operation
    } catch (e, stackTrace) {
      logger.e('Error in service', error: e, stackTrace: stackTrace);
    }
  }
}

Accessing Log History #

// Get all stored logs
final logs = FlutterAwesomeLogger.getLogs();

// Get logs by level
final errorLogs = FlutterAwesomeLogger.getLogsByLevel('ERROR');

// Get recent logs
final recentLogs = FlutterAwesomeLogger.getRecentLogs(
  duration: Duration(minutes: 10),
);

// Clear all logs
FlutterAwesomeLogger.clearLogs();

// Export logs as formatted text
String exportedLogs = FlutterAwesomeLogger.exportLogs();

Programmatically Show Logger UI #

// Show the logger history page
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const LoggerHistoryPage(),
  ),
);

Pause/Resume Logging #

// Pause all logging (both console and storage)
FlutterAwesomeLogger.setPauseLogging(true);

// Resume logging
FlutterAwesomeLogger.setPauseLogging(false);

// Check if logging is paused
bool isPaused = FlutterAwesomeLogger.isPaused;

Control Floating Logger Visibility #

// Check if floating logger is visible
bool isVisible = FlutterAwesomeLogger.isVisible();

// Show/hide the floating logger
FlutterAwesomeLogger.setVisible(true);  // Show
FlutterAwesomeLogger.setVisible(false); // Hide

// Toggle visibility
FlutterAwesomeLogger.toggleVisibility();

Manage API Logs #

// Get all API logs
final apiLogs = FlutterAwesomeLogger.getApiLogs();

// Get API logs by type
final successLogs = FlutterAwesomeLogger.getApiLogsByType(ApiLogType.success);
final errorLogs = FlutterAwesomeLogger.getApiLogsByType(ApiLogType.serverError);

// Clear API logs
FlutterAwesomeLogger.clearApiLogs();

🎨 Customization #

The logger UI is highly customizable. You can:

• Change colors and themes
• Customize the floating button appearance
• Configure log display formats
• Add custom filters and search options
• Pause/resume logging as needed
• Control logging behavior with simple configuration
• Enable/disable shake-to-toggle functionality
• Enable/disable shake-to-enable functionality for production builds
• Adjust shake sensitivity for different devices