How to return data from custom function which uses bottom sheet in flutter

Question

I made a custom function which opens modal bottom sheet in flutter. Now, I want to get some data back from the sheet to my previous page. How should I do it? I tried to make function's return type as Future<FilterDataModel> and Future, but it's not working. I want that whenever the user clicks on cancel, it should return false and when he presses apply, i should get true with the data.

Here is what I tried -

Future<FilterDataModel> showFilterBottomSheet<T>(
    {required BuildContext context}) async {
  
  Some code ...........

  FilterDataModel filterData = FilterDataModel();

  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      String val = "One";
      return StatefulBuilder(
        builder: (context, StateSetter setState) {
          return Wrap(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(
                  vertical: getProportionateScreenHeight(20),
                  horizontal: getProportionateScreenWidth(16),
                ),
                child: Column(
                  ..............
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: InkWell(
                            onTap: () {
                              Navigator.pop(context, [false, filterData]);
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(color: Colors.white),
                              ),
                              padding: EdgeInsets.symmetric(
                                vertical: getProportionateScreenHeight(16),
                              ),
                              child: Center(
                                child: Text(
                                  'Cancel',
                                  style: TextStyle(
                                    color: primaryText2,
                                    fontSize: 16,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: getProportionateScreenWidth(20),
                        ),
                        Expanded(
                          child: InkWell(
                            onTap: () {
                              Navigator.pop(context, [true, filterData]);
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(color: Colors.black38),
                              ),
                              padding: EdgeInsets.symmetric(
                                vertical: getProportionateScreenHeight(16),
                              ),
                              child: Center(
                                child: Text(
                                  'Apply',
                                  style: TextStyle(
                                    color: primaryOrange,
                                    fontSize: 16,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      );
    },
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
  ).then((value) {
    debugPrint("Coming data");
    debugPrint(filterData.academicYear.toString());
    return filterData;
  });
  return filterData;
}

And how I am calling it -

onPressed: () async {
              FilterDataModel f = await showFilterBottomSheet(
                context: context,
              );
              print("Here - ${f.academicYear}");
            },

I also tried to do it like this -

onPressed: () async {
              await showFilterBottomSheet(
                context: context,
              ).then((value) {
                print("Inside then");
                print(value[0]);
                print(value[1].toString());
              });
              print("Here - ${f.academicYear}");
            },

But it's not working.

Answer 1

You need to await your bottom sheet, to get the result that was returned from the Navigator.pop(context, value). so it will be like.

final res = await showModalBottomSheet(context, ....);
/// this is to make sure that the Navigator.pop(context) from the bottom sheet did not return a null.
if (res != null) {
   FilterDataModel filterData = FilterDataModel();
   return filterData;
} else {
   return anything;
}

Answer 2

looks like when you pop navigator you return List< dynamic> (boolean + filterDataModel)

so the scheme is:

final result = await showModalBottomSheet<dynamic>(){
   ...
   ... 
     return YourWidget(
       ...
       onTap: ()=> Navigator.of(context).pop([false, filterDataModel])
       ...
     )
}
final boolResult = result[0] as boolean;
final dataResult = result[1] as FilterDataModel;`

take a note that if modal is dismissible then return will be null in case it is dismissed without returned value and you will have to handle this case also