How to refresh parent page when action is done in ModalBottomSheet Flutter

user_12903504 0
Viewed 60

I am trying to make an eCommerce app using Flutter. When I click on the product it will show a bottom sheet with detailed information of the product. The idea is that once I add the product to the shopping cart, a number will appear on the top of the shopping cart icon detailing the amount of products you have saved on the shopping cart.

Shopping cart

Once I click on the save to shopping cart bottom, the bottom sheet will close, however, the parent page does not refresh and it still shows the previous saved amount

void openBotomSheet(Product product){
  showMaterialModalBottomSheet(
    context: context,
    builder: (context) => ClientProductsDetailPage(product: product),
);

I tried using this solution found on the internet, with no luck

Widget _cardProduct(Product product){ 
  return GestureDetector(
    onTap: ()async{
     await _con.openBotomSheet(product);
     setState((){});
    },
  child: Container( 'Content Here' )

Appreciate any help :)

flutter-showmodalbottomsheet dart flutter
1 Answers

You have to change your function from this:

void openBotomSheet(Product product){
  showMaterialModalBottomSheet(
    context: context,
    builder: (context) => ClientProductsDetailPage(product: product),
);

To

Future openBotomSheet(Product product) async {
  return await showModalBottomSheet(
    context: context,
    builder: (context) => ClientProductsDetailPage(product: product),
);

And your GestureDetector to this:

Widget _cardProduct(Product product){ 
  return GestureDetector(
    onTap: ()async{
     _con.openBotomSheet(product).then((value){
      // Do refresh function here
      // Also take setState inside, to rebuild the widget
     setState((){});
     });;
    },
  child: Container( 'Content Here' )

UPDATE:

I don't think there is something like showMaterialModalBottomSheet therefore I have used the closest similar widget which is showModalBottomSheet.

user_146413650
Related