🔍 Overview

ISpect is the main debugging and inspection toolkit designed specifically for Flutter applications.

ISpect empowers Flutter developers with a suite of debugging tools that seamlessly integrate into your development workflow. From monitoring HTTP requests in real-time to tracking performance metrics and managing application state, ISpect provides an intuitive interface that makes debugging efficient and insightful.

🎯 Key Features

• 🌐 Network Monitoring: Detailed HTTP request/response inspection with error tracking
• 📝 Logging: Advanced logging system with categorization and filtering
• ⚡ Performance Analysis: Real-time performance metrics and monitoring
• 🔍 UI Inspector: Widget hierarchy inspection with color picker and layout analysis
• 📱 Device Information: System and app metadata collection
• 🐛 Bug Reporting: Integrated feedback system with screenshot capture
• 🗄️ Cache Management: Application cache inspection and management

🏗️ Architecture

ISpect is built as a modular system with specialized packages:

Package	Purpose	Version
ispect	Core debugging interface and tools
ispectify	Foundation logging system (based on Talker)
ispectify_dio	Dio HTTP client integration
ispectify_http	Standard HTTP client integration
ispectify_bloc	BLoC state management integration
ispect_jira	Jira ticket creation integration

🌐 Internationalization

• Support for 12 languages: English, Russian, Kazakh, Chinese, Spanish, French, German, Portuguese, Arabic, Korean, Japanese, Hindi
• Extensible localization system

📱 Interface Preview

📦 Installation

Add ispect to your pubspec.yaml:

dependencies:
  ispect: ^4.1.4

🚀 Quick Start

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

void main() {
  // Initialize ISpectify for logging
  final ISpectify logger = ISpectifyFlutter.init();

  // Wrap your app with ISpect
  ISpect.run(
    () => runApp(MyApp()),
    logger: logger,
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: ISpectLocalizations.localizationDelegates([
        // Add your localization delegates here
      ]),
      builder: (context, child) => ISpectBuilder(
        child: child ?? const SizedBox.shrink(),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('ISpect Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              ISpect.logger.info('Button pressed!');
            },
            child: const Text('Press me'),
          ),
        ),
      ),
    );
  }
}

⚙️ Advanced Configuration

🎨 Custom Theming

MaterialApp(
  builder: (context, child) => ISpectBuilder(
    theme: ISpectTheme(
      pageTitle: 'Your name here',
      lightBackgroundColor: Colors.white,
      darkBackgroundColor: Colors.black,
      lightDividerColor: Colors.grey.shade300,
      darkDividerColor: Colors.grey.shade800,
      logColors: {
        'error': Colors.red,
        'info': Colors.blue,
      },
      logIcons: {
        'error': Icons.error,
        'info': Icons.info,
      },
      logDescriptions: [
        LogDescription(
          key: 'riverpod-add',
          isDisabled: true,
        ),
        LogDescription(
          key: 'riverpod-update',
          isDisabled: true,
        ),
        LogDescription(
          key: 'riverpod-dispose',
          isDisabled: true,
        ),
        LogDescription(
          key: 'riverpod-fail',
          isDisabled: true,
        ),
      ],
    ),
    child: child ?? const SizedBox.shrink(),
  ),
  /* ... */
)

🎛️ Panel Customization

MaterialApp(
  builder: (context, child) => ISpectBuilder(
    options: ISpectOptions(
      locale: const Locale('your_locale'),
      isFeedbackEnabled: true,
      actionItems: [
        ISpectActionItem(
            onTap: (BuildContext context) {},
            title: 'Some title here',
            icon: Icons.add),
      ],
      panelItems: [
        ISpectPanelItem(
          enableBadge: false,
          icon: Icons.settings,
          onTap: (context) {
            // Handle settings tap
          },
        ),
      ],
      panelButtons: [
        ISpectPanelButtonItem(
            icon: Icons.info,
            label: 'Info',
            onTap: (context) {
              // Handle info tap
            }),
      ],
    ),
    child: child ?? const SizedBox.shrink(),
  ),
  /* ... */
)

📚 Examples

Complete example applications are available in the example/ directory demonstrating core functionality.

🏗️ Architecture

ISpect is built as a modular system with specialized packages:

Package	Purpose	Version
ispect	Core debugging interface and tools
ispectify	Foundation logging system (based on Talker)
ispectify_dio	Dio HTTP client integration
ispectify_http	Standard HTTP client integration
ispectify_bloc	BLoC state management integration
ispect_jira	Jira ticket creation integration

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to the main branch.

📄 License

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

🔗 Related Packages

• ispectify - Foundation logging system
• ispectify_dio - Dio HTTP client integration
• ispectify_http - Standard HTTP client integration
• ispectify_bloc - BLoC state management integration
• ispect_jira - Jira ticket creation integration

---