reacton_devtools #

Flutter DevTools extension for the Reacton state management library. Provides reactive graph visualization, reacton inspector, timeline view, and performance metrics.

Installation #

dependencies:
  reacton_devtools: ^0.1.0

Setup #

Install the DevTools extension by calling ReactonDevToolsExtension.install() with your store, typically in main():

import 'package:flutter_reacton/flutter_reacton.dart';
import 'package:reacton_devtools/reacton_devtools.dart';

void main() {
  final store = ReactonStore();
  ReactonDevToolsExtension.install(store);

  runApp(ReactonScope(store: store, child: MyApp()));
}

Once installed, open Flutter DevTools and navigate to the Reacton tab.

Tabs #

Graph View #

Visualizes the reactive dependency graph as an interactive DAG. Nodes represent reactons and edges represent dependencies. Color-coded by type:

• Blue -- Writable reactons
• Green -- Computed reactons
• Orange -- Async reactons
• Red -- Effects

Click a node to inspect its value, subscribers, and dependency chain.

Reacton Inspector #

Browse all reactons in the store with their current values. Features:

• Search and filter reactons by name or type
• View current value and type information
• Edit writable reacton values in real-time
• See subscriber count and dependency depth

Timeline #

A chronological log of all state changes. Shows:

• Which reacton changed and its old/new value
• Timestamp and propagation duration
• Which computed reactons were recomputed as a result
• Effect executions triggered by the change

Performance #

Aggregated performance metrics for the reactive graph:

• Total reacton count and node count
• Recomputation frequency per computed reacton
• Propagation time histograms
• Identifies hot paths and potential bottlenecks

Service Extensions #

The extension registers the following Dart service extensions for communication with DevTools:

Documentation #

See the Reacton documentation for full API reference and guides.

License #

MIT