dart - Flutter How to pass single data from Stream to another Screen and also got updated

Question

I was making an app with a streambuilder that listen to firestore snapshot, and creating a list of item from it, and when i click one of item it would navigate me to new screen with the detail of the item and i could also modify some info of the item there, the problem arise when i tried to update the info of item in firestore, the first screen with streambuilder got rebuild with updated data while the detail page didnt get updated, the flow is more or less like this :

and here is my simplified code:

First Screen where i navigate and pass the asyncsnapshot and index to detail screen

class _SalesOrderPenyediaState extends State<SalesOrderPenyedia> {

Widget itemTile(context, SalesOrder element, AsyncSnapshot orderSnap, int index) {  
                        //NAVIGATE TO DETAIL SCREEN
                        GestureDetector(
                          onTap: () {
                            Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => StreamBuilder<List<SalesOrder>>(
                                stream: orderStreams,
                                builder: (context, snapshot) {
                                  return SalesOrderDetailPenyedia(
                                          streamOrder: orderSnap,
                                          index: index,
                                        );
                                }
                              ),
                              fullscreenDialog: true,
                            );}
                           child : Container()}


@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
                stream: orderStreams,
                builder: (context, AsyncSnapshot<List<SalesOrder>> snapshot) {
                        ListView(
                            children: snapshot.data
                                .asMap()
                                .map((index, item) => MapEntry(
                                    index, itemTile(context, item, snapshot, index)))
                                .values
                                .toList())
                  }
                }),
          ),
        ],
      ),

Detail Page

class SalesOrderDetailPenyedia extends StatefulWidget {
  AsyncSnapshot<List<SalesOrder>> streamOrder;
  int index;
  SalesOrderDetailPenyedia({ this.index, this.streamOrder});

  @override
  State<StatefulWidget> createState() => SalesOrderDetailState();
  
}

class SalesOrderDetailState extends State<SalesOrderDetailPenyedia>{
  SalesOrder salesOrder;
  OrderServices orderServices = OrderServices();
 
  @override
  Widget build(BuildContext context) {

    salesOrder = widget.streamOrder.data[widget.index];
    return Scaffold(
    body : Column()//where i show and update my data
)        
}

I am new to flutter and been stuck to this for a few day, any advice will be really appreciated

question from:https://stackoverflow.com/questions/65645397/flutter-how-to-pass-single-data-from-stream-to-another-screen-and-also-got-updat

Answer 1

I don't see exactly the problem but passing down the asyncSnapshot to the details page is not very useful as it may lose the reference to the first streamBuilder builder function it came from.

So the best way would be to create a stream (best it would be a BehaviorSubject from the rxDart lib) and then add to it with the data you want to pass and then pass that stream to the Details page.

Once the update finishes, the firebaseResponse should either return the new data or u manually refresh it and at that time pass it down to the Details widget via the same stream.

i can see a point in trying to pass down the same stream to the details page and save on request times (if u have the data necessary to show the items list already) but it is very messy in my opinion, u probably should take another approach, the one i mentioned or an other much simpler one.