Flutter Dev Toolkit

πŸš€ A modular in-app developer console for Flutter apps.

Track logs, API calls, navigation, lifecycle events, screen transitions, app state, and more β€” all in real time, inside your app.

pub package GitHub


✨ Features

  • βœ… In-app Dev Console with floating overlay
  • βœ… Colored logs with filtering and tagging
  • βœ… Network call inspector (supports http, dio, and retrofit)
  • βœ… Route stack and screen duration tracker
  • βœ… Lifecycle event logging
  • βœ… Export logs, network calls, and route data
  • βœ… Plugin system for adding custom tools
  • βœ… App State Inspector (Bloc support)

πŸ›  Installation

Add to your pubspec.yaml:

dependencies:
  flutter_dev_toolkit: ^latest_version

Then:

flutter pub get

πŸš€ Getting Started

1. Initialize the toolkit

void main() {
  FlutterDevToolkit.init(
    config: DevToolkitConfig(
      logger: DefaultLogger(),
      disableBuiltInPlugins: [
        // BuiltInPluginType.logs,
        // BuiltInPluginType.network,
        // BuiltInPluginType.routes,
        // BuiltInPluginType.deviceInfo,
      ],
    ),
  );

  runApp(MyApp());
}

2. Add Dev Console Overlay

MaterialApp(
  builder: (context, child) {
    return Stack(
      children: [
        child!,
        const DevOverlay(),
      ],
    );
  },
  navigatorObservers: [RouteInterceptor.instance],
);

πŸ”Œ Network Setup

πŸ”Ή Using http package

Replace the default client with HttpInterceptor from the toolkit:

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

final client = HttpInterceptor(); // Instead of http.Client()

final response = await client.get(Uri.parse('https://example.com'));

πŸ”Ή Using dio

Register Dio interceptor:

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

πŸ”Ή Using retrofit

Pass the configured Dio instance to your Retrofit client:

final api = MyApiClient(Dio()..interceptors.add(DioNetworkInterceptor()));

🧩 Plugins

You can add custom developer tools as plugins:

class CounterPlugin extends DevToolkitPlugin {
  @override 
  String get name => 'Counter';

  @override 
  IconData get icon => Icons.exposure_plus_1;

  @override 
  void onInit() => debugPrint('CounterPlugin loaded!');

  @override 
  Widget buildTab(BuildContext context) => Center(child: Text('Counter Tab'));
}

FlutterDevToolkit.registerPlugin(CounterPlugin());

πŸ” App State Inspector

Inspect state transitions (Bloc only for now).

Bloc.observer = DevBlocObserver();

FlutterDevToolkit.registerPlugin(
  AppStateInspectorPlugin([
    BlocAdapter(),
  ]),
);

πŸ“ Logging

FlutterDevToolkit.logger.log('Message');
FlutterDevToolkit.logger.log('Error occurred', level: LogLevel.error);

πŸ“€ Exporting

You can export relevant data directly from each plugin’s tab:

  • Logs Plugin β†’ Export filtered logs
  • Network Plugin β†’ Export captured network calls
  • Route Tracker β†’ Export route stack and navigation history

πŸ–ΌοΈ Screenshots

Log Console

Bloc Inspector – Overview

Device Info

Network Interceptor

Route Tracker


πŸ“„ License

MIT