Here is my code of BottomModalSheet:
onTap: () async{
await scaffoldKey.currentState
.showBottomSheet((context) =>
StatefulBuilder(
builder: (BuildContext context,StateSetter setState){
return
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 200,
color: Colors.black,
),
Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.cyan,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('DELIVERY AT',style: TextStyle(fontSize: 12),),
SizedBox(height: 5,),
Row(
children: <Widget>[
Container(
margin:EdgeInsets.only(top: 5),
child: Icon(Icons.check_circle,color: Colors.black,)),
SizedBox(width: 5,),
Text('Area Code ',style: TextStyle(fontSize: 14),),
_userPin!=null?Text(_userPin,style: TextStyle(fontSize: 16),):Container(),
],
),
Container(
margin: EdgeInsets.only(left: 30,top: 5),
child: Text('We will try to deliver in 60 minutes',style: TextStyle(fontSize: 12),))
],
),
),
),
Container(
child: Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: cart.toSet().toList().length,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
height: 65,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),color: Colors.black),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text('${cart[index].Counter}',style: TextStyle(color: Colors.white),)),
Container(
child: Text(cart[index].OurPrice,style: TextStyle(color: Colors.white),)),
Container(
child: Text(cart[index].Name,style: TextStyle(color: Colors.white),))
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
InkWell(
onTap: (){
if(totalItems.length>=1){
totalPrice.remove(int.parse(cart[index].OurPrice));
cart.remove(categoryItemList[index]);
cart[index].Counter--;
totalItems.remove(1);
print(totalPrice);}
else
{
print('No item left in cart');
}
setState(() {
});
},
child: Container(
height: 60,width: 50,
decoration: BoxDecoration(color: Colors.redAccent,borderRadius: BorderRadius.only(topRight: Radius.circular(10)
,bottomRight: Radius.circular(10))),
child: Icon(Icons.delete,size: 28,),
),
)
],
),
],
)
),
);
}),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
margin: EdgeInsets.only(bottom: 10),
height: 50,width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Colors.cyan,borderRadius: BorderRadius.circular(10)),
child:Center(child: Text('Proceed to Checkout',textAlign: TextAlign.center,style: TextStyle(fontSize: 16,fontWeight: FontWeight.w600),)) ,
),
)
],
),
);
}
),
);
},
Here I'm attaching my screenshots :
ScreenShot 1:ss1
ScreenShot 2:ss2
On Clicking cart in screenshot 1, I'm opening BottomModalSheet as shown in image 2 and when I press on delete button shown in ss2, one of the item get's deleted and I want the same to be updated on the parent screen i.e. ss1. I tried doing it by making this method async but I failed. Even I want my list Item to be disappear from screen(ss2), when item count of specific item gets 0. I'm able to change the Item count on Ss2 screen, but I want if item count is 1 and when i press delete again it will remove that item from the screen I ss2.