Flutter Chuck Inspection 🔍 #

A beautiful and powerful HTTP inspector for Flutter applications. Monitor, debug, and analyze all HTTP requests and responses in real-time with an elegant dark-themed UI and persistent notifications.

✨ Features #

• 📊 Real-time HTTP Monitoring - Track all HTTP requests and responses
• 📊 Export - JSON and CSV
• 🔔 Persistent Notifications - Stay updated with ongoing request statistics
• 🎨 Beautiful Dark UI - Modern, sleek interface with smooth animations
• 🔍 Detailed Request Inspector - View headers, body, response, and errors
• 📱 Multiple HTTP Clients Support:
  • http package via ChuckHttpClient
  • dio package via ChuckDioInterceptor
• 🎯 Smart Filtering - Filter by All, Success, or Error requests
• 📤 Export & Share - Share HTTP logs easily
• ⚡ Zero Configuration - Simple setup, works out of the box
• 🔐 Permission Handling - Automatic notification permission management
• 📈 Statistics Dashboard - View total, success, and error counts at a glance

📸 Screenshots #

🚀 Installation #

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

dependencies:
  flutter_chuck_inspection: ^1.0.0

Then run:

flutter pub get

⚙️ Platform Configuration #

Android Setup #

1. Update AndroidManifest.xml (android/app/src/main/AndroidManifest.xml):

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Add these permissions -->
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    
    <application
        android:label="your_app_name"
        android:icon="@mipmap/ic_launcher">
        
        <!-- Add notification receivers -->
        <receiver android:exported="false" 
            android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
        <receiver android:exported="false" 
            android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
                <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
                <action android:name="android.intent.action.QUICKBOOT_POWERON" />
                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
            </intent-filter>
        </receiver>
        
        <activity android:name=".MainActivity">
            <!-- Your activity configuration -->
        </activity>
    </application>
</manifest>

2. Update build.gradle (android/app/build.gradle):

android {
    compileSdkVersion 34  // Must be 33 or higher
    
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 34
    }
}

iOS Setup #

No additional configuration required! 🎉

📖 Usage #

Basic Setup #

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize Chuck Inspector
  final inspector = ChuckInspector();
  await inspector.init(
    navKey: GlobalKey<NavigatorState>(),
    enableNotifications: true,
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: ChuckInspector().navigationKey,
      title: 'My App',
      home: HomeScreen(),
    );
  }
}

Using with HTTP Package #

import 'package:http/http.dart' as http;
import 'package:flutter_chuck_inspection/flutter_chuck_inspection.dart';

// Wrap your http.Client with ChuckHttpClient
final client = ChuckHttpClient(http.Client());

// Make requests as usual
final response = await client.get(
  Uri.parse('https://api.example.com/users'),
);

// All requests are automatically tracked! 🎉

Using with Dio Package #

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

final dio = Dio();

// Add Chuck interceptor
dio.interceptors.add(ChuckDioInterceptor());

// Make requests as usual
final response = await dio.get('https://api.example.com/users');

// All requests are automatically tracked! 🎉

Opening Inspector Screen #

// Method 1: Tap on notification (automatic)

// Method 2: Programmatically
ChuckInspector().showInspector();

// Method 3: Add a floating button
FloatingActionButton(
  onPressed: () => ChuckInspector().showInspector(),
  child: Icon(Icons.bug_report),
)

// Method 4: Shake detection (requires sensors_plus)
// Implement shake gesture to open inspector

Managing Notifications #

final inspector = ChuckInspector();

// Check if notifications are enabled
bool enabled = inspector.notificationsEnabled;

// Request permissions manually
bool granted = await inspector.requestNotificationPermissions();

// Check permissions
bool hasPermission = await inspector.checkNotificationPermissions();

// Enable notifications
inspector.enableNotifications();

// Disable notifications
inspector.disableNotifications();

// Refresh notification manually
await inspector.refreshNotification();

// Cancel notifications
await inspector.cancelNotifications();

// Clear all data
inspector.clear();

🎨 UI Features #

Inspector Screen #

• Statistics Bar: Shows total requests, success count, and error count
• Filter Chips: Filter by All, Success, or Errors
• Request List: Beautiful cards showing:
  • HTTP method with color coding (GET=Blue, POST=Green, etc.)
  • Status code
  • Duration in milliseconds
  • URL path and host
  • Error messages (if any)
• Share Button: Export all HTTP logs

Request Details Screen #

Four tabs with comprehensive information:

1. Overview Tab

   • HTTP method
   • Full URL
   • Status code (color-coded)
   • Duration
   • Timestamp
   • Response size

2. Request Tab

   • Request headers (formatted JSON)
   • Request body (formatted JSON)
   • Copy to clipboard button

3. Response Tab

   • Response headers (formatted JSON)
   • Response body (formatted JSON)
   • Copy to clipboard button

4. Error Tab

   • Error messages
   • Stack traces
   • Exception details

🔧 Advanced Configuration #

Custom Initialization #

await ChuckInspector().init(
  navKey: myNavigatorKey,
  enableNotifications: true,
  notificationChannelId: 'my_http_inspector',
  notificationChannelName: 'API Monitor',
  notificationChannelDescription: 'Monitors all API calls',
);

Settings Screen Example #

class SettingsScreen extends StatefulWidget {
  @override
  _SettingsScreenState createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  final inspector = ChuckInspector();
  bool _notificationsEnabled = true;

  @override
  void initState() {
    super.initState();
    _checkPermissions();
  }

  Future<void> _checkPermissions() async {
    final enabled = await inspector.checkNotificationPermissions();
    setState(() => _notificationsEnabled = enabled);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HTTP Inspector Settings')),
      body: ListView(
        children: [
          SwitchListTile(
            title: Text('Enable Notifications'),
            subtitle: Text('Show HTTP request statistics'),
            value: _notificationsEnabled,
            onChanged: (value) async {
              if (value) {
                final granted = await inspector.requestNotificationPermissions();
                if (granted) {
                  inspector.enableNotifications();
                  setState(() => _notificationsEnabled = true);
                }
              } else {
                inspector.disableNotifications();
                setState(() => _notificationsEnabled = false);
              }
            },
          ),
          ListTile(
            title: Text('Clear All Data'),
            leading: Icon(Icons.delete),
            onTap: () {
              inspector.clear();
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('All HTTP calls cleared')),
              );
            },
          ),
          ListTile(
            title: Text('View Inspector'),
            leading: Icon(Icons.bug_report),
            trailing: Icon(Icons.arrow_forward_ios),
            onTap: () => inspector.showInspector(),
          ),
          ListTile(
            title: Text('Request Permissions'),
            leading: Icon(Icons.notifications_active),
            onTap: () async {
              final granted = await inspector.requestNotificationPermissions();
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    granted 
                      ? 'Permissions granted!' 
                      : 'Permissions denied'
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

📊 API Reference #

ChuckInspector #

Main singleton class for HTTP inspection.

Properties

Methods

HttpCall #

Model class representing an HTTP request/response.

class HttpCall {
  final String id;
  final String method;
  final String url;
  final DateTime createdAt;
  final Map<String, dynamic>? requestHeaders;
  final dynamic requestBody;
  final HttpResponse? response;
  final String? error;
  final Duration? duration;
  
  bool get isError;
  bool get isSuccess;
}

HttpResponse #

Model class representing HTTP response data.

class HttpResponse {
  final int statusCode;
  final Map<String, dynamic>? headers;
  final dynamic body;
  final int? contentLength;
}

🎯 Best Practices #

1. Initialize Early: Call init() in your main() function
2. Use Global Key: Share the same NavigatorKey across your app
3. Production Build: Consider disabling in production:

   if (kDebugMode) {
     await ChuckInspector().init(enableNotifications: true);
   }
   

4. Memory Management: Call clear() periodically to prevent memory buildup
5. Permission Timing: Request permissions before making first API call

🐛 Troubleshooting #

Notifications Not Showing #

1. Check Android permissions in manifest
2. Verify compileSdkVersion is 33+
3. Request permissions explicitly:

   await inspector.requestNotificationPermissions();
   

4. Check notification settings in device Settings app
5. Look for debug logs: flutter run --verbose

Inspector Screen Not Opening #

1. Ensure navigationKey is set correctly
2. Verify init() was called with valid navKey
3. Check if context is available

HTTP Calls Not Being Tracked #

1. Verify you're using ChuckHttpClient or ChuckDioInterceptor
2. Check that inspector was initialized before making requests
3. Ensure interceptor was added to Dio instance

📝 Example App #

Check out the /example folder for a complete working example with:

• HTTP client integration
• Dio interceptor integration
• Settings screen
• Permission handling
• Shake gesture to open inspector

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

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 Chuck Interceptor for Android
• UI design inspired by modern debugging tools
• Built with ❤️ for the Flutter community

📧 Support #

• 🐛 Report a bug
• 💡 Request a feature
• 📧 Email: sanjaysharmajw@gmail.com

Made with ❤️ by Flutter Developers

Star ⭐ this repo if you find it useful!