Flutter - How do I call a Parent widget function from child widget while also maintaining the state with a variable?

Question

I have the following code structure: Parent --> Child --> GrandChild. I need to call the function in parent from grandchild. Also, a boolean variable needs to be available in both parent and grandchild for UI changes (keeping them in sync). How do I do this?

HomeScreen: (Parent Widget)

    Widget build(BuildContext context) {


  return Scaffold(
    backgroundColor: Colors.white,
    body: SafeArea(
      child:
          //FROSTED GLASS BACKGROUND
          Container(
          child: Column(
            children: [

              //CHILD
              RecordButtonWithOuterCircleAndShadow(
                isRecording: isRecording,
                toggleRecording: getRecorderFn(),
              ),

            ],
          ),
        
       ),
    ),
  );
}

CHILD:

    class RecordButtonWithOuterCircleAndShadow extends StatefulWidget {
  RecordButtonWithOuterCircleAndShadow({
    Key? key,
    required this.toggleRecording,
    required this.isRecording,
  }) : //_isRecording = isRecording,
        super(key: key);

  //final double outerCircleSize;
  final VoidCallback? toggleRecording;
  final bool isRecording;
  @override
  State<RecordButtonWithOuterCircleAndShadow> createState() =>
      _RecordButtonWithOuterCircleAndShadowState();
}

class _RecordButtonWithOuterCircleAndShadowState
    extends State<RecordButtonWithOuterCircleAndShadow> {
  @override
  Widget build(BuildContext context) {
                ...
              //GRAND CHILD
                child: RecordButtonWithShadow(
              toggleRecording: widget.toggleRecording,
              isRecording: widget.isRecording,
              size: widget.isRecording ? 80 : 200,
            ),
         ...
         ...

GRAND CHILD:

            child: InkWell(
          borderRadius:
              //widget.isRecording
              _isRecording
                  ? BorderRadius.circular(100)
                  : BorderRadius.circular(widget.size / 2),
          onTap: () {
            widget.toggleRecording;
            Provider.of<RecordingInfo>(context, listen: false)
                .updateRecordingStatus();
          },

I can pass the function as a parameter but then how do I update the boolean value?!. Also, currently I am getting an error: "java.lang.IllegalStateException: Reply already submitted ".

Answer 1

Your idea of passing the function and boolean to the grandchild widget is correct. Regarding updating the boolean, it must be done from the parent widget.

I think I spotted a bug in your code but I am not sure since I don't have the full code, in the parent widget:

toggleRecording: getRecorderFn(),

Should be replaced with:

toggleRecording: getRecorderFn,

or

toggleRecording: () => getRecorderFn(),

The way you are sending the function is wrong since you are not sending the function but rather its return, aka when the widget is built, your code will call getRecorderFn() and return its result. Again I am not sure about the return value of getRecoderFn() this might be intentional but I don't have the rest of the code to judge.

Regarding the error, more details are required.