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.

Examples

• Counter
• Todos