StreamBuilder limitation

Question

StreamBuilder is rebuild whenever it get new event. This cause problem with for example navigation (Navigator.push) because if new event is receive while navigate then this trigger rebuild. Because try to navigate while widget tree still being built, this will throw error.

It is not possible to prevent rebuild to avoid this issue as required.

Suggested workaround is basically take stream from cache. Also: here and here

But this mean cannot have StreamBuilder build list which constantly update if also want to provide navigation from cards on list. For example in card onPressed(). See here.

So to refresh data must use pull to refresh…

Anyone have better solution? Or is Flutter team work on solve this limitation for example by allow prevent rebuild if card is tap by user?

UPDATE:

TL;DR Is pull to refresh only way to update data since stream in StreamBuilder must be cached to prevent it rebuilding every time new event is received?

UPDATE 2:

I have try implement cache data but my code not work:

Stream<QuerySnapshot> infoSnapshot;

fetchSnapshot()  {
  Stream<QuerySnapshot> infoSnapshot = Firestore.instance.collection(‘info’).where(‘available’, isEqualTo: true).snapshots();
  return infoSnapshot;
}


  @override
  void initState() {
    super.initState();
  fetchSnapshot();
  }

...

child: StreamBuilder(
stream: infoSnapshot,
builder: (context, snapshot) {

if(snapshot.hasData) {
   return ListView.builder(
        itemBuilder: (context, index) =>
            build(context, snapshot.data.documents[index]),
        itemCount: snapshot.data.documents.length,
     );
  } else {
      return _emptyStateWidget();
  }

UPDATE 3:

I have try use StreamController but cannot implement correct:

Stream<QuerySnapshot> infoStream;
StreamController<QuerySnapshot> infoStreamController = StreamController<QuerySnapshot>();

  @override
  void initState() {
    super.initState();

  infoStream = Firestore.instance.collection(‘info’).where(‘available’, isEqualTo: true).snapshots();
  infoStreamController.addStream(infoStream);
  }

…

child: StreamBuilder(
stream: infoStreamController.stream,
builder: (context, snapshot) {

UPDATE 4:

Suggestion to use _localStreamController give error:

StreamController<QuerySnapshot> _localStreamController = StreamController<QuerySnapshot>();

  @override
  void initState() {
    super.initState();

Firestore.instance.collection(‘info’).snapshots().listen((QuerySnapshot querySnapshot) {

//      if(userAdded == null) {
        _localStreamController.add(querySnapshot);
//      }

    });
...
child: StreamBuilder(
stream: _localStreamController.stream,
builder: (context, snapshot) {

The getter 'stream' was called on null.

The method 'add' was called on null.

Answer 1

Try breaking everything into widgets

Running the query should cache it even if you fully close your app(I believe only cache it on fully closed for up to 30 minutes but if you remain without internet connection, you still have access to past previous cached queries from Firestore)

Try something like this:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Please work')),
      body: _buildStream(context),
    );
  }

  Widget _buildStream(BuildContext context) {
     return StreamBuilder(
      stream: yourFireStoreStream,
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();

        return _buildAnotherwidget(context, snapshot.data.documents);
      },
    );
  }
  Widget _buildAnotherwidget(Buildcontext context, List<DocumentSnapshot> snaps){
    return ListView.Builder(
      itemCount: snaps.length,
      itemBuilder:(context, index) {
      ..dostuff here...display your cards etc..or build another widget to display cards
         }
     );
 }

focus on the breaking into more widgets. The highest part should have the streambuilder along with the stream. then go deep down into more widgets. The streambuilder automatically will listen and subscribe to the given stream.

When streambuilder updates, it will update the lower widgets.

Now this way, when you tap on a card in a lower widget to navigate, it should not affect the highest widget because it will effect only the UI.

we placed the streambuilder in its own top level widget...

I hope i made some sense :(

I wrote the code out without testing but im sure you can get it to work

Answer 2

It seems like the actual problem based on your comments above is that it crashes after you navigate away from the view using the stream. You have to either:

• Cancel your stream controller when you navigate away so that it's not listening for any more events.
• Or just don't emit any new values through the stream after navigation. Add a pause on it until you come back to the view

Update: Adding code with pseudo example

class Widget {
  // Your local stream 
  Stream<String> _localStream;
  // Value to indicate if you have navigated away
  bool hasNavigated = false;
  ...
  void init() {
    // subscribe to the firebase stream
    firebaseStream...listen((value){
      // If this value is still false then emit the same value to the localStream
      if(!hasNavigated) {
        _localStream.add(value);
      }
    });
  }

  Widget build() {
    return StreamBuilder(
      // subscribe to the local stream NOT the firebase stream
      stream: _localStream,
      // handle the same way as you were before
      builder: (context, snapshot) {
         return YourWidgets();
      }
    );
  }
}