2

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 :)

xtream111
  • 21
  • 1

1 Answers1

2

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.

Shahzad Umar Baig
  • 142
  • 2
  • 8
  • Thank you for your reply! Unfortunately, after doing the changes you mentioned, it is still not having the desired result. Only after I go to another page and enter the product page again, the number on the shopping cart updates – xtream111 Jun 12 '22 at 16:27
  • I understand your query, it is rather an issue of state management. I suggest you should check Provider (which is the most basic solution) to solve your problem, as I do not have an understanding of how your application is designed/works. This is the only optimum solution I could see. – Shahzad Umar Baig Jun 13 '22 at 06:19