title: Flutter - Dynamic suffix text for TextField?
body: <p>I'm building a simple soundboard app in Flutter, which includes a search bar at the top of the application.</p>
  
  <p>At the point where the search is activated, the interesting bit of the widget tree is as follows:</p>
  
  <pre><code>home: Scaffold(
            appBar: AppBar(
              title: new TextField(
                controller: _filter,
                decoration: new InputDecoration(
                  prefixIcon: new Icon(Icons.search, color: Colors.white),
                  hintText: 'Search...'
            ),
  </code></pre>
  
  <p>As text is typed into the search bar, a listener on the <code>_filter</code> updates a list of quotes which is used to build the body of the app. This is all working fine.</p>
  
  <p>However, I would now like the app to show a count of the returned results, and since this is sitting in my header bar I'd like it to sit in-line with the bar itself, something like:</p>
  
  <p><a href="https://i.stack.imgur.com/uZJhb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uZJhb.png" alt="enter image description here"></a></p>
  
  <p>Things I've tried, all within the <code>InputDecoration</code>:</p>
  
  <ul>
  <li>Setting <code>suffixText</code> - this is styled right and in the right place, however it doesn't update as the <code>_filter</code> changes because I'm not reconstructing the <code>TextField</code> every time (and I can't do this as it messes up what's been typed in).</li>
  <li>Setting <code>suffix</code> to a full <code>TextField</code> widget with its own controller. This gets it auto-updating, but for some reason obscures my actual search text. I tried making the background transparent but that hasn't helped - <code>new TextField(controller: _searchCountController, readOnly: true, textAlign: TextAlign.end, style: TextStyle(backgroundColor: Colors.transparent),)</code>. In the below screenshot, I've typed a 'w' which has updated the count to 84 (but I can't see the 'w' I've typed...)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/RrBQn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RrBQn.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>Setting <code>counter</code> instead of <code>suffix</code>. I can get this to auto-update and not obscure my search, but it appears under the search bar which makes the whole thing look naff. Doesn't really seem appropriate for something sat in the title bar.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/Es7pF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Es7pF.png" alt="enter image description here"></a></p>
  
  <p>Any suggestions for how I can achieve what I'm after? Very new to Flutter so very possible that I've missed something obvious. Hoping there's a simple solution to this :)</p>