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.

@FilledStacks question: is pull to refresh only way to implement this functionality? — FlutterFirebase, Feb 27 '19 at 20:41
what do you want to achieve actually? whats your goal? where and when do you want to use `NavigatorState#push()` method? — pskink, Feb 27 '19 at 20:44
@pskink Need to call `Navigator.push` in `onPressed()` in card list which `StreamBuilder` build by return `ListView.builder` — FlutterFirebase, Feb 27 '19 at 20:47
ok, so whats the problem with it? you can use `StreamBuilder` to build your widget tree and it has nothing to do with `Navigator` methods — pskink, Feb 27 '19 at 20:48
@pskink As I say in question `StreamBuilder` rebuild whenever get new event. So if call `Navigator.push` when `StreamBuilder` get new event, will be error because Widget tree still being built — FlutterFirebase, Feb 27 '19 at 20:51
no, it will not call `Navigator.push()` method - `Navigator.push()` is called inside `onPressed` method, isnt it? — pskink, Feb 27 '19 at 20:52
@pskink Yes StreamBuilder not call Navigator.push. User press onPressed which call Navigator.push. But if StreamBuilder get event before Navigation is complete then StreamBuilder rebuild ListView.builder — FlutterFirebase, Feb 27 '19 at 20:55

Filled Stacks · Answer 1 · 2019-02-28T18:14:57.423

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();
      }
    );
  }
}

edited Feb 28 '19 at 18:14

answered Feb 28 '19 at 03:30

Filled Stacks

4,116
1
23
36

My stream is from Firestore so I not think you answer is possible – FlutterFirebase Feb 28 '19 at 12:10
@FlutterFirebase It's definitely possible. Subscribe to the fluter stream locally in your stateful view, transform and emit the values that come through to a local stream in your state. Use the local stream in the widget builder, not the firestore state. When you navigate away cancel the subscription of your local stream that you setup. Then you won't get any more values. – Filled Stacks Feb 28 '19 at 12:24
Thanks for reply! I am try implement you cache now but cannot make work. I have update question with my code – FlutterFirebase Feb 28 '19 at 12:42
@FlutterFirebase That's not a cache implementation and also, you don't need to cache anything. You just add a step in between using the firebase stream as is :/ Don't have time to type up code now. I'll come back to this later and write pseudo code to help you understand how you can solve it. – Filled Stacks Feb 28 '19 at 12:48
Thanks! I look but cannot find how – FlutterFirebase Feb 28 '19 at 14:24
I have try use `StreamController` to get Firestore stream local like you say but cannot make work. I have update question with code – FlutterFirebase Feb 28 '19 at 16:43
@FlutterFirebase I think you're miss understanding what I was saying. You need to call .listen on your firebase stream. You'll use the values that's broadcast to your listen callback to send that through to your localStream. The local stream goes into the StreamBuilder, NOT the firebase stream. Listen callback will be guarded by some value indicating if you've navigated away, while it's false you emit values to your local stream. When you navigate away and set your guardValue to true then it won't emit any values to the localStream until you come back to the view. – Filled Stacks Feb 28 '19 at 18:04
2

@FlutterFirebase that's the best I can do with the code now. I have to release an app today. That's all pseudo code but should give you and idea of what to do. – Filled Stacks Feb 28 '19 at 18:15
Thanks for post! I try implement but very difficult. Cannot call `.add()` on `Stream`. I can only find possible to call on `StreamController` like in Update 3. But you say this not correct approach. Is possible give more code? – FlutterFirebase Feb 28 '19 at 22:05
@flutterfirebase put your stream in a stream controller. It's Pseudo code. It's not actual real code, you should interpret it and write the real code. Just add the local stream into a stream controller and call add on that. – Filled Stacks Mar 01 '19 at 06:08
I really try but cannot make work because cannot cancel `StreamController`. So it keep on listen to stream and no difference to original code. – FlutterFirebase Mar 01 '19 at 11:22
I have post update 4 show implement in real code you suggestion give error – FlutterFirebase Mar 01 '19 at 11:52
@FlutterFirebase all of the best to you man. I gave you a solution, I'm definitely not writing the code for you. You should be able to handle null references on your own :). Good luck – Filled Stacks Mar 01 '19 at 12:10

score 0 · Answer 2 · answered Mar 08 '19 at 07:14

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

StreamBuilder limitation

2 Answers2