如何从父小部件在子有状态小部件内运行函数？

Question

I am trying to run a function(with arguments) inside two-levels down StateFul widget , by clicking a button in the parent of the parent of that child( after having all widgets built, so not inside the constructor ). just like in the image below:

More details is that I created a Carousal which has Cards inside, published here .

I created it with StreamBuilder in mind(this was the only use case scenario that I used it for so far), so once the stream send an update, the builder re-create the whole Carousal, so I can pass the SELECTED_CARD_ID to it.

But now I need to trigger the selection of the carousal's Cards programmatically, or in another word no need for two construction based on the snapshot's data like this:

return StreamBuilder(
      stream: userProfileBloc.userFaviourateStream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return SelectableCarousal(
            selectedId: snapshot.data.toInt(),
            onTap: //Update the stream
            //some props...,
          );
        } else {
          return SelectableCarousalLoading(
            selectedId: null,
            onTap: //Update the stream
            //some props...,
          );
        }
      },
    );

But instead, I'm trying to have something like this so I can use it for others use cases:

Widget myCarousal =  SelectableCarousal(
    selectedId: null,
    onTap: //Update the stream
    //some props...,
);
return StreamBuilder(
      stream: userProfileBloc.userFaviourateStream,
      builder: (context, snapshot) {

        // Then when data ready I can update 
        // the selection by calling two-level down function
        if (snapshot.hasData) {
          myCarousal.selectById(3);
        }

        // Build same carousal in all cases.
        return myCarousal;
      },
    );

so this led me to my original question " How to run a function(with arguments) inside two-levels down StateFul widget? ".

I appreciate any help. thanks a lot.

Answer 1

I was able to solve that challenge using the BLoC & Stream & StreamSubscription , see the image below:

Inside the Homepage screen:

///...Inside Homepage screen level-0
RaisedButton(
    child: Text('Update value in the BLoC'),
    onPressed: () {
         bloc.changeSelectedState(isSel);
    },
),
//...

inside the BLoC:

class Bloc {
  final BehaviorSubject<bool> _isSelectedStreamController = BehaviorSubject<bool>();

  // Retrieve data from stream
  Stream<bool> get isSelectedStream => _isSelectedStreamController.stream;

  // Add data to stream
  Function(bool) get changeSelectedState => _isSelectedStreamController.sink.add;

  void dispose() {
    _isSelectedStreamController.close();
  }
}
final bloc = Bloc();

Inside any widget in any level as long as it can reach the bloc:

// This inside the two-levels down stateful widget..
StreamSubscription isSelectedSubscription;
Stream isSelectedStream = bloc.isSelectedStream;
isSelectedSubscription = isSelectedStream.listen((value) {
      // Set flag then setState so can show the border.
      setState(() {
        isSelected = value;
      });
});

//...other code

@override
Widget build(BuildContext context) {

   return Container(
      decoration: isSelected
          ? BoxDecoration(
              color: Colors.deepOrangeAccent,
              border: Border.all(
                width: 2,
                color: Colors.amber,
              ),
            )
          : null,
          //...other code
    );
}

so the new design of my widget includes the BLoC as a main part of it, see the image:

and...works like a charm with flexible and clean code and architecture ^^