title: Flutter: Updating the more recent value while the user in viewing the page with streams
body: <p>Am I thinking about this the right way?</p>
  <p>I created a function that takes in a value from firebase, value in seconds, and convert it into hours:minutes:seconds, this works fine. I've used Streams for my function and a StreamBuilder for my text widget to display the value, but without the setState I don't know how else to always show the more recent value while the user is actively looking at the page. Without setState I would have to navigate to a different page then come back to see the UI update the most recent value.</p>
  <p>Is using setState the correct way to go about it? Will it cause a spam of writes to firebase, causing me to go over the limit ( i have a free firebase account).</p>
  <p>Is there a better way to always show the most updated value on screen?</p>
  <pre><code>Stream&lt;String&gt; printDuration() async* {
     FirebaseFirestore.instance
          .collection(&quot;users&quot;)
          .doc(user!.uid)
          .snapshots()
          .listen(
            (event) =&gt; someVar = event.data()!['timeActive'], 
            onError: (error) =&gt; print(&quot;Listen failed: $error&quot;)
          );
  
      Duration duration = Duration(seconds: someVar ?? loggedInUser.timeActive);
        String twoDigits(int n) =&gt; n.toString().padLeft(2, &quot;0&quot;);
      String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
      String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
      String _getData = &quot;${twoDigits(duration.inHours)}:$twoDigitMinutes:$twoDigitSeconds&quot;;
      setState(() {});
      yield _getData;
    }
  </code></pre>
  <p>text widget</p>
  <pre><code>
  StreamBuilder&lt;String&gt;(
                                    stream: printDuration(),
                                    builder: ((context, snapshot) {
                                      if (snapshot.data != null) {
                                        return Center(
                                          child: Text(
                                            snapshot.hasData ? snapshot.data!.toString(): 'no data yet',
                                            style: TextStyle(
                                              color: Color(0xff516395),
                                              fontSize: 26.0,
                                              letterSpacing: 2.0,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        );
                                      } else {
                                        return Text('0',
                                            style: TextStyle(
                                              color: Color(0xff516395),
                                              fontSize: 30.0,
                                              letterSpacing: 2.0,
                                              fontWeight: FontWeight.bold,
                                            ));
                                      }
                                    }),
                                  )
  </code></pre>