flutter_bloc_devtools

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

flutter_bloc_devtools enables remote debugging of Bloc states in Flutter applications by connecting all Bloc instances to a DevTools server. This allows developers to inspect state changes, track transitions, and debug bloc logic in real time during runtime. The package integrates seamlessly with the Flutter DevTools ecosystem, providing visibility into bloc behavior without requiring local debugging setup. It is particularly useful for complex state management scenarios where understanding state flow is critical.

Use cases

Real-time state inspection during development
Debugging complex state transitions
Remote debugging across multiple devices
Monitoring bloc behavior in production-like environments
Collaborative debugging sessions

Key features

Connects all Bloc instances to a remote DevTools server
Provides live state change tracking
Integrates with Flutter DevTools
Supports remote debugging without local setup
Enables visualization of bloc events and states

Suitable for

Developers working with complex state management
Teams collaborating on state-heavy apps
Testing and debugging in distributed environments
Apps requiring detailed state monitoring

Considerations

Requires a running DevTools server
Not intended for production use
May introduce latency in high-frequency state updates
Limited to Flutter projects using flutter_bloc
Depends on network connectivity for remote access

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Remote Devtools for flutter_bloc

Remote Devtools support for Blocs of flutter_bloc.

N.B. Cubit is not supported

Installation

Add the library to pubspec.yaml:

dependencies:
  flutter_bloc_devtools: ^0.1.0

BlocObserver configuration

Add RemoteDevToolsObserver to your Bloc.observer:

void main() async {
  final observer = RemoteDevToolsObserver('192.168.1.7:8000');
  await observer.connect();
  Bloc.observer = observer;

  runApp(const CounterApp());
}

Making your Events and States Mappable

Events and States have to implements Mappable:

class CounterState extends Equatable implements Mappable {
  final int counter;

  const CounterState({
    this.counter,
  });

  @override
  List<Object> get props => [
        counter,
      ];

  @override
  Map<String, dynamic> toMap() => {
        'counter': counter,
      };
}

Using remotedev

Use the Javascript Remote Devtools package. Start the remotedev server on your machine

npm install -g remotedev-server
remotedev --port 8000

Run your application. It will connect to the remotedev server. You can now debug your flutter_bloc application by opening up http://localhost:8000 in a web browser.

Search packages, repositories and app categories

Install package