like_devtool 1.2.4

A developer tooling panel for the LIKE networking package. Provides an inspectable bottom sheet with logs, traffic inspector, and feature flags.

like_devtool

The official, premium, and production-safe developer tooling panel for the LIKE networking ecosystem. Injects a highly responsive, draggable floating action button (FAB) that opens a beautiful debug overlay for real-time insights with zero production footprint.

---

Why like_devtool?

Capability	Standard Tooling	like_devtool
Production Safety	Heavy runtime checks or manual stripping	Zero-overhead; completely stripped at compile-time in release modes
Traffic Inspector	External network proxies or logs	Integrated, draggable real-time request capture & JSON drills
Hive DB Viewer	External storage viewers or custom printing	Direct storage panel for viewing cache boxes and flushing entries
Encrypted Image Cache	Undefined disk exploration	Space monitoring (MBs & file count) + decrypted cache clearing
Dynamic Mocking	Mock servers or code re-compilation	UI controls to activate rules and simulate error codes at runtime
UI Performance	Paint-heavy overlays causing lag	High-performance layout utilizing SnapshotWidget to bypass paint

---

Architecture Overview

graph TD
    Panel[LIKE DevTool Panel] --> T1[Traffic Inspector 🌐]
    Panel --> T2[Hive Storage Explorer 💾]
    Panel --> T3[System Logs Console 📝]
    Panel --> T4[Encrypted Image Cache Monitor 🖼️]
    Panel --> T5[API Mocking Rule Manager 🎭]
    Panel --> T6[Feature Flags & Quick Actions 🎛️]
    Panel --> T7[Device, App & Connection Metrics 📱]

---

⚡ 100% Production-Safe (Zero Overhead)

like_devtool is engineered to protect production builds from security exposure and performance overhead:

• Compile-Time Short-Circuiting: It automatically detects kReleaseMode and strips the entire devtool widget tree, controllers, assets, and dependencies.
• No Runtime Overhead: Release binaries carry zero performance penalty, keeping your release app completely secure and lightweight.

---

🏗️ Feature Ecosystem (The 7 Panels)

like_devtool divides developer controls into 7 beautifully animated, context-rich modules:

1. Traffic Inspector 🌐

• Real-time API Capture: Captures all HTTP/REST and simulation request streams initiated by LikeClient.
• Deep Inspect: Drill down into requests to inspect HTTP methods, status codes, query parameters, request/response headers, and raw JSON payloads.

2. Hive Storage Explorer 💾

• Hive Database Viewer: Live viewer connected to local persistent Hive boxes (like_api_cache, like_offline_queue, like_cache_metadata, like_etags).
• Active Entry Inspection: Browse cached keys, view expiration parameters, and track active offline synchronization queues.
• One-Tap Flush: Instantly flush caching boxes to force live API fetches.

3. System Logs Console 📝

• Internal Event Tracing: Stream and record internal LIKE warnings, diagnostics, custom debug logging, and connection updates.
• Filter & Export: Search and filter log messages at runtime to isolate specific issues.

4. Encrypted Image Cache Monitor 🖼️

• Stats & Space Tracking: Real-time monitor tracking image files and total disk usage utilized by the secure, AES-CBC 256-bit encrypted LikeCacheImage subsystem.
• Manual Cache Purging: Wipe cached images from disk with a single click to trigger decrypt validations and fresh fetches.

5. API Mocking Rule Manager 🎭

• Visual Mocking Rules: Toggle and inspect custom MockRules registered via the MockController.
• API Simulation Control: Manage which path patterns are intercepted, test simulated error codes (e.g. 500, 429, 403), and preview simulated payloads.

6. Feature Flags & Quick Actions 🎛️

• Live Feature Flags: Change environments and test feature flags without re-compiling.
• Convenience Shortcuts: Trigger quick actions such as clearing all stored application state, re-synchronizing queues, or rotating tokens.

7. Device, App & Connection Metrics 📱

• System Diagnostics: Live metrics tracking UI FPS, RSS memory usage, local IP addresses, and connectivity status (WIFI, CELLULAR, NONE).
• Package Info: Live view of App Name, Package Name, Version, and Build Number.

---

🛠️ Getting Started

1. Add Dependencies

Add like_devtool to your pubspec.yaml dependencies:

dependencies:
  flutter:
    sdk: flutter
  like: ^1.2.4
  like_devtool: ^1.2.4

2. Initialize in Like Root Wrapper

Pass the LikeDevTool to the devTool builder function inside your top-level Like wrapper widget:

import 'package:flutter/material.dart';
import 'package:like/like.dart';
import 'package:like_devtool/like_devtool.dart';

void main() {
  runApp(
    Like(
      baseUrl: 'https://api.example.com',
      getToken: () async => 'session_jwt_token',
      // Injects the devtool FAB and bottom sheet in debug/profile builds:
      devTool: (child) => LikeDevTool(child: child),
      child: const MyApp(),
    ),
  );
}

---

🛡️ Production Stripping & Zero-Dependency Setup

To strictly enforce that like_devtool is completely omitted from production builds, choose one of these clean configurations:

Option A: Conditional Initialization (Recommended)

Allows the compiler to tree-shake like_devtool in release builds while maintaining a single, clean main.dart entrypoint:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:like/like.dart';
import 'package:like_devtool/like_devtool.dart';

void main() {
  runApp(
    Like(
      baseUrl: 'https://api.example.com',
      getToken: () async => 'session_jwt_token',
      // Only wrap with the devtool in debug/profile modes.
      // In release mode, devTool is null and completely stripped.
      devTool: kReleaseMode ? null : (child) => LikeDevTool(child: child),
      child: const MyApp(),
    ),
  );
}

Option B: Separate Entrypoints (Zero-Imports in Release)

Keep like_devtool strictly inside dev_dependencies to avoid importing it in your main production file:

1. Add like_devtool under dev_dependencies in your pubspec.yaml:

   dependencies:
     like: ^1.2.4
   
   dev_dependencies:
     like_devtool: ^1.2.4
   

2. Create a development-only entrypoint: lib/main_dev.dart:

   import 'package:flutter/material.dart';
   import 'package:like/like.dart';
   import 'package:like_devtool/like_devtool.dart';
   import 'main.dart' as prod;
   
   void main() {
     prod.devToolBuilder = (child) => LikeDevTool(child: child);
     prod.main();
   }
   

3. Keep your production entrypoint lib/main.dart completely clean:

   import 'package:flutter/material.dart';
   import 'package:like/like.dart';
   
   // Global builder variable overridden only by main_dev.dart
   Widget Function(Widget child)? devToolBuilder;
   
   void main() {
     runApp(
       Like(
         baseUrl: 'https://api.example.com',
         getToken: () async => 'session_jwt_token',
         devTool: devToolBuilder, // Will be null in production
         child: const MyApp(),
       ),
     );
   }
   

4. Run your application during development using the development entrypoint:

   flutter run -t lib/main_dev.dart
   

---

🎨 Premium Theme Customization

like_devtool features a beautiful glassmorphic dark-themed layout built to align with premium development aesthetics.

You can override the default theme preset by supplying an initialTheme argument:

LikeDevTool(
  initialTheme: LikeDevToolThemeData.neonPurple, // Preset
  child: MyApp(),
)

Available Presets

• LikeDevToolThemeData.darkTeal (Default - sleek, premium modern dark)
• LikeDevToolThemeData.amberGold (Warm, high-contrast, gold-accented)
• LikeDevToolThemeData.neonPurple (Vibrant neon dark mode)
• LikeDevToolThemeData.sakuraPink (Soft dark pink theme)
• LikeDevToolThemeData.cleanLight (Highly-scannable clean light mode)

Defining a Custom Color Palette

To perfectly match your company brand, define a custom LikeDevToolThemeData:

const myBrandTheme = LikeDevToolThemeData(
  primary: Color(0xFF6366F1),        // Indigo Primary Accent
  background: Color(0xFF0B0F19),     // Deep Obsidian Canvas
  cardBackground: Color(0xFF111827), // Midnight Gray Cards
  inputBackground: Color(0xFF1F2937),// Slate Gray Input Fields
  textColor: Colors.white,           // Text Color
);

LikeDevTool(
  initialTheme: myBrandTheme,
  child: MyApp(),
)

---

⚙️ Advanced Build Configurations

Override the INCLUDE_DEVTOOLS compiler flag to control inclusion at compile time:

Force Enable in Release Builds (Private Test Flights)

flutter build apk --dart-define=INCLUDE_DEVTOOLS=true

Force Strip in Profile Builds (Performance Benchmarking)

flutter build apk --profile --dart-define=INCLUDE_DEVTOOLS=false

---

🤝 Connect & Support

📦 pub.dev	pub.dev/packages/like_devtool
📖 Docs / Wiki	github.com/AjayJasperJ/like_docs
🐛 Issues	github.com/AjayJasperJ/like_docs/issues
💻 GitHub	@AjayJasperJ
💼 LinkedIn	Ajay Jasper J
📸 Instagram	@ajayjasper.j
✉️ Email	[e-mail]

---

Made with ❤️ by Ajay Jasper J · MIT License