flutter_telescope 1.0.9

A powerful Flutter package for network activity monitoring and debugging with beautiful UI and comprehensive logging.

🎬 Demo

flutter_telescope

A powerful Flutter package for network activity monitoring and debugging. Telescope provides comprehensive network request logging, beautiful UI for viewing network activities, and powerful debugging tools for Flutter applications.

Features

• 🌐 Network Activity Monitoring - Automatically logs all HTTP/Dio requests and responses
• 🎨 Beautiful UI - Modern, theme-aware interface for viewing network activities
• 📊 Detailed Information - Request/response headers, bodies, status codes, timing
• 🐛 Error Tracking - Comprehensive error logging and debugging information
• 📋 Copy & Share - Easy copying and sharing of network data
• 🔍 Floating Test Button - Quick access to network inspector
• 🌓 Theme Support - Light and dark mode compatibility
• 📝 JSON Formatting - Pretty-printed request/response bodies

Installation

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

dependencies:
  flutter_telescope: ^1.0.0

Then run:

flutter pub get

Quick Start

1. Initialize the Package

import 'package:flutter_telescope/flutter_telescope.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NetworkInspector.initialize();
  runApp(MyApp());
}

2. Setup Dio Client (Recommended)

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

class MyService {
  late Dio _dioClient;
  
  MyService() {
    _dioClient = DioClientHelper.createDioWithInterceptor(
      networkInspector: NetworkInspector(),
      logIsAllowed: true,
      isConsoleLogAllowed: true,
      baseUrl: 'https://api.example.com',
      onHttpFinish: (hashCode, title, message) {
        // Handle HTTP completion callbacks
        print('$title: $message');
      },
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
    );
  }
  
  Future<void> fetchData() async {
    final response = await _dioClient.get('/users');
    return response.data;
  }
}

3. Setup HTTP Client

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

class MyHttpService {
  late HttpInterceptor _httpClient;
  
  MyHttpService() {
    _httpClient = HttpClientHelper.createHttpClient(
      networkInspector: NetworkInspector(),
      logIsAllowed: true,
      isConsoleLogAllowed: true,
      baseUrl: Uri.parse('https://api.example.com'),
      headers: {
        'Content-Type': 'application/json',
      },
    );
  }
  
  Future<void> fetchData() async {
    final response = await _httpClient.get('/users');
    return response.body;
  }
}

4. Enable Floating Test Button

import 'package:flutter_telescope/flutter_telescope.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NetworkInspector.initialize();
  
  // Enable floating test button
  NetworkInspectorConfig.enableTestButton(
    alignment: Alignment.bottomRight,
    margin: 20.0,
    customButton: const Icon(Icons.network_check),
  );
  
  runApp(MyApp());
}

5. View Network Activities

import 'package:flutter_telescope/flutter_telescope.dart';

// Navigate to activity list
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ActivityPage()),
);

// Or use overlay for quick access
MaterialApp(
  home: NetworkInspectorOverlay(
    child: MyHomePage(),
  ),
)

API Reference

NetworkInspector

Main class for managing network monitoring.

Methods

• initialize() - Initialize the network inspector
• logActivity({...}) - Manually log network activity
• getActivities() - Get all logged activities
• clearActivities() - Clear all activities
• debugDatabase() - Print database debug information

NetworkInspectorConfig

Configuration for the floating test button.

Methods

• enableTestButton({...}) - Enable floating test button
• disableTestButton() - Disable floating test button
• isTestButtonEnabled - Check if test button is enabled

DioClientHelper

Helper for creating Dio clients with network monitoring.

Methods

• createDioWithInterceptor({...}) - Create Dio client with interceptor

HttpClientHelper

Helper for creating HTTP clients with network monitoring.

Methods

• createHttpClient({...}) - Create HTTP client with interceptor

Example App

See the example/ directory for a complete working example app that demonstrates all features of flutter_telescope.

Dependencies

• flutter: Flutter framework
• dio: ^5.9.0: HTTP client with interceptors
• http: ^1.6.0: HTTP client
• logger: ^2.4.0: Logging framework
• path: ^1.9.0: Path manipulation
• sqflite: ^2.3.3: Local database storage

Requirements

• Flutter SDK: ^3.10.7
• Dart SDK: ^3.10.7

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

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.

Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the example app for usage patterns
• Read the API documentation above

Changelog

See CHANGELOG.md for a list of changes and version history.