title: Flutter: How to Use StreamBuilder With BlocBuilder in Case the Stream Is a Part of The Bloc's State?
body: <p>I will use simplified version than that of my project but feel free to ask for more code if necessary. This may be more of an architectural question.</p>
  <p>I have a service (interface) <code>FooService</code> in my app which exposes a stream <code>fooStream</code>. I have this service as a member of the bloc class <code>MyBloc</code>.</p>
  <p>Now the state of the bloc <code>MyBlocState</code> contains <code>isProcessing</code> to indicate if the bloc is processing and also it contains <code>fooStream</code> field which expose the service's version of <code>fooStream</code> to the UI layer (so there are 3 layers: service =&gt; bloc =&gt; UI).</p>
  <p>The problem now is that when I want to listen to this service stream in my UI, I am forced to use a <code>StreamBuilder</code> which itself will be wrapped inside a <code>BlocBuilder</code>. And this will become very messy in a large app. So whats the best way to represent the <code>fooStream</code> inside the bloc's state? Can I just listen to the stream inside the bloc and add an event to the bloc whenever a <code>fooStream</code> event arrives? Wouldn't this be a bad side effect where state will be updated in a messy way and changes in state can't be tracked anymore?</p>
  <p>Sample code:</p>
  <pre><code>class FooService{
  
    Stream fooStream;// the stream is exposed here
  
    ...
  
  }
  
   class MyBloc extends ... {
    
    FooService myService = ...;//the service is used here as a member
    
    ...
    
  }
  
  class MyBlocState extends ... {
  
    Stream? fooStream;//this value will hold the stream exposed from the service and it may be initialized in an init event in the bloc for example
  
    ...
  
  }
  </code></pre>
  <p>and now in the UI I have to do this ugly thing (ugly because now I am listening to the state from 2 places, from the bloc and from the stream, which in my opinion defeats the purpose of the bloc as the sole entry point to change the state and maintain it in the UI/app):</p>
  <pre><code>Widget build(BuildContext context){
    return BlocBuilder&lt;MyBloc,MyBlocState&gt;(
      builder: (context, myBlocState) {
        if(myBlocState is Loading){
          return CircularProgressIndicator();
        }
        if(myBlocState is Error){
          return ErrorWidget();
        }
        if(myBlocState is SomeState){
          return StreamBuilder(//I need to wrap the StreamBuilder inside the BlocBuilder because the stream will be null when the app launches but then it will have a value which is fooStream when I call init in the bloc
            stream: myBlocState.fooStream,
            builder: (context, snapshot) {
              if(snapshot.hasData){
                return SomeWidget();
              }
              else{
                return SomeOtherWidget();
              }
            },
          );
        }
      },
    )
  }
  </code></pre>