title: Flutter `socket_io_client` convert socket.on(event, data) to stream and use in dynamically generated stream builder
body: <p>I have a list of people, each with their own socket connection. I am using a <code>ListBuilder</code> to generate a list of widgets for them but I want each of these widgets to listen if the person's socket connection has received an event from the server and update accordingly. I have tried everything I could find online and still cannot find a solution to this.</p>
  
  <p>This is what I have tried with one of the solutions posted below</p>
  
  <pre><code>import 'dart:async';
  
  import 'package:flutter/material.dart';
  import 'package:socket_io_client/socket_io_client.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    List&lt;Person&gt; sockets = [
      Person(
          name: 'Jon',
          socket: io('http://localhost:3000', {
            'transports': ['websocket'],
            'autoConnect': false
          }),
          controller: StreamController&lt;String&gt;()),
      Person(
          name: 'Tim',
          socket: io('http://localhost:3000', {
            'transports': ['websocket'],
            'autoConnect': false
          }),
          controller: StreamController&lt;String&gt;()),
      Person(
          name: 'Bob',
          socket: io('http://localhost:3000', {
            'transports': ['websocket'],
            'autoConnect': false
          }),
          controller: StreamController&lt;String&gt;()),
    ];
  
  // function to sink the data
    void sinkToController(data, Person person) {
      var message = '$data';
      person.controller.sink.add(message);
    }
  
    void streamPerson(Person person) {
      person.socket.connect();
      person.socket.on('connect', (data) {
        print('connected');
        person.socket.on('serverMessage', (data) {
          print('$data');
          sinkToController(data, person);
        });
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Socket test app"),
        ),
        body: Container(
            child: ListView.builder(
                itemCount: 3,
                itemBuilder: (context, index) {
                  streamPerson(sockets[index]);
  
                  return GestureDetector(
                    onTap: () =&gt; sockets[index].socket.emit('msg', 'this is me: ${sockets[index].name}'),
                    child: Container(
                      height: 300,
                      width: 350,
                      child: Column(
                        children: [
                          Text(sockets[index].name),
                          StreamBuilder&lt;String&gt;(
                            initialData: 'initial',
                            stream: sockets[index].controller.stream,
                            builder: (context, snapshot) {
                              return Text('${snapshot.data}');
                            },
                          )
                        ],
                      ),
                    ),
                  );
                })),
      );
    }
  }
  
  class Person {
    String name;
    Socket socket;
    StreamController&lt;String&gt; controller;
  
    Person({this.name, this.socket, this.controller});
  }
  
  </code></pre>
  
  <p>However, this doesn't work so I was hoping if there was a way to convert the socket.on('event') to a stream dynamically and use it in the generated stream builder.</p>
  
  <p>The result from this is </p>
  
  <p><a href="https://i.stack.imgur.com/KcrYp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KcrYp.png" alt="A listBuilder where each person **should** have there own stream of data with their own name"></a></p>
  
  <p>Thank you in advance</p>