How to use Websocket data from one connection in multiple screens of a Flutter application?

I'm building a Flutter application that receives real-time data from a server via a Websocket connection. The data received from the server is relevant to all screens of the application. I want to use this data in all screens of the application, without having to establish a new Websocket connection on each screen.

How can I achieve this? Is there a way to establish the Websocket connection only once and use the data received in all screens of the application? Should I use a global variable to store the received data or is there a better approach?

I'm using the web_socket_channel package to establish the Websocket connection and I'm currently passing the received data to each screen using the Navigator widget. However, this approach is not scalable and makes the code difficult to maintain.

Any guidance on how to implement this feature would be highly appreciated.

Here is my function for the init socket connection.

    import 'package:web_socket_channel/io.dart';
    import 'package:web_socket_channel/web_socket_channel.dart';
    
    late WebSocketChannel webSocketChannel;
    
    void connectWebSocket() {
      WebSocket.connect("wss://MY_DOMAIN_URL", headers: {
        'Connection': 'Upgrade',
        'Upgrade': 'WebSocket',
      }).then((ws) {
        log('SOCKET CONNECCTED');
        // create the stream channel
        webSocketChannel = IOWebSocketChannel(ws);
    
        // webSocketChannel.stream.listen((message) {
        //   log(message);
        // });
    
    
      }).catchError((onError) {
        log('onError $onError');
      });
    }

I want to use message data on all the screens if necessary.

Also, I checked StramBuilder but in some cases, I also want to access message data outside of the build method.

There are some approaches to this scenario depending on what state managment library you choose.
Below are some basic ideas of one approach.
I personally recommend rxdart since its Stream-subclass BehaviorSubject lets you have access to the last emitted value of the Stream without having to subscribe. The base class Stream does not provide this cool feature.
Let's say we have a singleton service called MessageSerivce, we will add values emitted from the webSocketChannel stream to the _subject stream:

class MessageSerivce {
  final _subject = BehaviorSubject<Message>();

  Stream<Message> get stream => _subject;
  Message get latest =>  _subject.value;

  void startListen() {
    // setup web socket
    webSocketChannel.stream.listen((data) {
      _subject.add(Message.parse(data));
    });
  }

  void stopListen() {}
}

You can use the StreamBuilder widget to listen to messageService.stream to rebuild UI anywhere when a new message is emitted.
Use messageService.latest to access the latest message from anywhere.