title: How to show progress indicator when fetching data from API?
body: <p>The problem is very simple but I am unable to find a proper solution. I have a search screen and here is what I want to do.</p>
  <ul>
  <li>When screen is started for first time, I want to show a message in <code>Text</code> widget 'Your results will appear here'.</li>
  <li>If user enters something in search box and press search, I want to show <code>CircularProgressIndicator</code>.</li>
  <li>And then, when API response is received, I want to either show a <code>ListView</code> or <code>Text</code> saying 'Found nothing'.</li>
  <li>If user searches something again, I want to show <code>CircularProgressIndicator</code> again.</li>
  </ul>
  <p>How can I achieve this behavior using <code>Stream</code>? Following is my code so far:</p>
  <p><strong>Widgets</strong></p>
  <pre><code>StreamBuilder&lt;List&lt;Model&gt;&gt;(
    stream: bloc.searchStream,
    builder: (context, snapshot) {
  
      if (snapshot.hasError) {
        return Center(
          child: Text(
            'Error occurred'
          ),
        );
      }
  
      if (!snapshot.hasData) {
        return Center(
          child: Text(
            'Your results will appear here'
          ),
        );
      }
  
      if (snapshot.hasData &amp;&amp; snapshot.data.length &lt; 1) {
        return Center(
          child: Text(
            'Found nothing'
          ),
        );
      }
  
      // Where should I put my CircularProgressIndicator?
  
      return ListView.separated(
        itemCount: snapshot.data.length,
        separatorBuilder: (context, index) =&gt; Divider(height: 1),
        itemBuilder: (context, index) {
          final item = snapshot.data[index];
          return ItemWidget(item);
        },
      );
    },
  )
  </code></pre>
  <p><strong>BLoC</strong></p>
  <pre><code>final _searchStreamController = StreamController&lt;List&lt;Model&gt;&gt;();
  Stream&lt;List&lt;Model&gt;&gt; get searchStream =&gt; _searchStreamController.stream;
  
  void search(String searchTerm) async {
  
    if (searchTerm.isEmpty) {
      _searchStreamController.add(null);
      return;
    }
  
    final client = HttpClient();
    client.method = HttpMethod.POST;
    client.endPoint = 'search';
    client.addData('query', searchTerm);
  
    try {
      final responseStr = await client.execute();
      final response = SearchResponse.fromJson(responseStr);
      _searchStreamController.add(response.data);
    } catch (e) {
      _searchStreamController.addError(e);
    }
  }
  </code></pre>
  <p>I want to display <code>CircularProgressIndicator</code> every time <code>search(String searchedTerm)</code> function is called.</p>
  <p>Thank you.</p>