How To Broadcast An Event From One Stateful Widget To Another In Flutter

Question

I would like to broadcast an event from one Stateful Widget to another but cant seem to find a way to do. I installed this plugin : event: ^1.1.4 but it doesn't fire. I want something like below:

Stateful Widget 1:
SomeEventClass.broadcastEvent();

Stateful Widget 2:
SomeEventClass.subscribe();

Solution

By using something like this.

class ContinuousStream {
  _DataStore _mStorage = _DataStore.getInstance();

  /// Sets a new value [value] to the data stream [stream].
  /// If there are active subscribers, the value will be dispatched to them.
  void emit(String stream, var value) {
    _mStorage?.setValue(stream, value);
  }

  /// Subscribes to the given stream [stream].
  /// If stream already has data set, it will be delivered to the [callback] function.
  void on(String stream, void Function(Object) callback) {
    _mStorage?.setCallback(stream, callback);
  }

  /// Returns the current value of a given data [stream].
  Object getValue(String stream) {
    return _mStorage?.getValue(stream);
  }
}

// Storage class for ContinuousStream.
class _DataStore {
  // Singleton Instance for DataStore
  static _DataStore _instance;

  // Map instance to store data values with data stream.
  HashMap<String, _DataItem> _mDataItemsMap = HashMap();

  // Sets/Adds the new value to the given key.
  void setValue(String key, var value) {
    // Retrieve existing data item from map.
    _DataItem item = _mDataItemsMap[key];

    item ??= _DataItem();

    // Set new value to new/existing item.
    item.value = value;

    // Reset item to the map.
    _mDataItemsMap[key] = item;

    // Dispatch new value to all callbacks.
    item.callbacks?.forEach((callback) {
      callback(value);
    });
  }

  // Sets/Adds the new callback to the given data stream.
  void setCallback(String key, Function(Object) callback) {
    if (callback != null) {
      // Retrieve existing data item from the map.
      _DataItem item = _mDataItemsMap[key];

      item ??= _DataItem();

      // Retrieve callback functions from data item.
      List<Function(Object)> callbacks = item.callbacks;

      // Check if callback functions exists or not.
      if (callbacks == null) {
        // If it's null then create new List.
        callbacks = List();

        // Set callback functions list to data item.
        item.callbacks = callbacks;

        // Set the data item to the map.
        _mDataItemsMap[key] = item;
      }

      // Add the given callback into List of callback functions.
      callbacks.add(callback);

      // Dispatch value to the callback function if value already exists.
      if (item.value != null) {
        callback(item.value);
      }
    }
  }

  // Returns current value of the data stream.
  Object getValue(String key) {
    return _mDataItemsMap[key].value;
  }

  // Returns singleton instance of _DataStore
  static _DataStore getInstance() {
    _instance ??= _DataStore();
    return _instance;
  }
}

// Data class to hold value and callback functions of a data stream.
class _DataItem {
  var value;
  List<Function(Object)> callbacks;
}

Once this class is made then you can initialize and access the stream. For Example This needs to be done in both StateFulWidget 1 and StateFUlWidget 2.

ContinuousStream continuousStream = new ContinuousStream();

Then from StateFulWidget1:

void send() {
      String message = "Hello";
      continuousStream.emit("chat-message", message);
  }

This corresponds to your broadCast event.

And from StatefulWidget2:

continuousStream.on("chat-message", (message) {
      print("Message Received: $message");
    });

This corresponds to your subscribe Event. This should fix your issue.

Comments

[Faiizii Awan]

ok what I have understood form it is, you want to trigger a function of a A screen inside the B screen. Right?

[Oliver Dixon]

Tons of type errors A value of type 'Object?' can't be returned from the method 'getValue' because it has a return type of 'Object'