why showDialog function is not opening the Dialog in parent?

Question

I want to open a dialog in a parent statefull widget and use a callback to trigger that function from child class statefull widget, but the function called in parent does not get executed from child, the function does get executed but the showDialog seems not to be used, I even tried to move the function responsible to open to dialog to the child class but showDialog does not work either.

Here the code:

shareDilog function in parent class:

  shareDialog(screenWidth, BuildContext cont) {

    return showDialog(
        context: cont,
        builder: (BuildContext cont) {
          print('inside inside');
          return Dialog(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            elevation: 0,
            child: StatefulBuilder(
                builder: (BuildContext cont, StateSetter setState) {
                  return Container(
                    height: 680,
                    width: 650,
                    decoration: BoxDecoration(
                      color: Color(0xFF282828),
                    ),
                    child: ShareDialog(),
                  );
                }),
          );
        },
        barrierDismissible: false
    );

  }

Where I pass this shareDialog function in parent to child:

Record(
      visibleColumns: visibleColumns,
      recordFullNameFieldName: recordFullNameFieldName,
      oneRecord: listRecordsFilter[index],
      screenWidth: screenWidth,
      openShareDialog: shareDialog,  // <-------
      dashboardContext: context,    // <--------
       )

Where the call gets executed in child:

final Function(double, BuildContext)? openShareDialog;  // the constructor parameter

            PopupMenuItem(
              onTap: () {

                try {

                  widget.openShareDialog!(widget.screenWidth!, widget.dashboardContext!);  // <---here the call back
                 // _showMyDialog();  // This is the test when I moved the function to the child

                } catch(e) {

                  print(e);

                }

              },
              child: ListTile(
                leading: Icon(Icons.groups_sharp),
                title: Text('Share'),
              ),
            ),

Answer 1

This can be achieved in many ways, here is my way:

1. Create the shareDialog() function in the parent widget. please try to assign different names for all the contexts. this may confuse flutter. here is a mini version of your code for the same:

   shareDialog(screenWidth, BuildContext cont) {
   return showDialog(
     context: cont,
     builder: (ctx) {
       print('inside inside');
       return Dialog(
         shape:
             RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
         elevation: 0,
         child: Container(
           padding: EdgeInsets.all(20),
           decoration: BoxDecoration(
             color: Color(0xFF282828),
           ),
           child: Text(
             "Hello World!",
             style: TextStyles.title2.colour(Colors.white),
           ),
         ),
       );
     },
   );}
   

2. Next pass the function and other parameters to the child widget.

   Record(showDialog: shareDialog)
   

and finally, use the passed function in the child widget. here I have created a dummy Record widget that contains a listTile which on tapping executes the shareDialog function:

class Record extends StatelessWidget {
  final Function showDialog;
  Record({this.showDialog});
  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () => showDialog(SizeConfig.screenWidth, context),
      title: Text("Tile"),
      leading: CircleAvatar(
        backgroundColor: Colors.amber,
        child: Icon(Icons.umbrella, color: Colors.white),
      ),
      subtitle: Text("Show Share dialog"),
    );
  }
}