Home > Back-end >  How to return data from custom function which uses bottom sheet in flutter
How to return data from custom function which uses bottom sheet in flutter

Time:05-25

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.

CodePudding user response:

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

CodePudding user response:

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;
}
  • Related