StreamBuilder - Bad state: Use multiple StreamBuilder on one screen

Question

Since I use multiple StreamBuilder in my screen I get a Bad state error. I know that I have to use a StreamController and use it with .broadcast().

Because I dont create the streams by myself I dont know how to change the controller of these streams.

This is my code:

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            StreamBuilder<List<int>>(
                stream: streamOne?.value,
                builder: (c, snapshot) {
                  final newValueOne = snapshot.data;
                  return Text(newValueOne);
                }),
            StreamBuilder<List<int>>(
                stream: streamTwo?.value,
                builder: (c, snapshot) {
                  final newValueTwo = snapshot.data;
                  return Text(newValueTwo);
                }),
            StreamBuilder<List<int>>(
                stream: streamThree?.value,
                builder: (c, snapshot) {
                  final newValueThree = snapshot.data;
                  return Text(newValueThree);
                }),
          ],
        ),
      ),
    );
  }
}

I tried to have it as BroadcastStreams:

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            StreamBuilder<List<int>>(
                stream: streamOne?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueOne = snapshot.data;
                  return Text(newValueOne);
                }),
            StreamBuilder<List<int>>(
                stream: streamTwo?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueTwo = snapshot.data;
                  return Text(newValueTwo);
                }),
            StreamBuilder<List<int>>(
                stream: streamThree?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueThree = snapshot.data;
                  return Text(newValueThree);
                }),
          ],
        ),
      ),
    );
  }
}

This didnt work and gave me still a bad state error.

Would be great if somone could help me here. Thank you very much!

Answer 1

Inside your streamBuilder builder, you have to check that the snapshot has actually received the data, otherwise your Text widget is receiving null, thus, throwing a bad state error:

 StreamBuilder<List<int>>(
                stream: streamThree.asBroadcastStream(),
                builder: (c, snapshot) {
                  if(snapshot.hasData){
                    final newValueThree = snapshot.data;
                    return Text(newValueThree);
                  } else {
                    // return any other widget like CircularProgressIndicator
                  }
                }),

You can also check on

snpashot.connectionState == ConnectionState.done

and

snpashot.connectionState == ConnectionState.active

and

snpashot.connectionState == ConnectionState.waiting