How to add a button after an image in flutter - image

Question

I'm getting images from list and display it using Gridview, and I want if my imageList lenght is less than 4 then a button will display after the last image, that should be in row. here is my code. I warp the row widget into Expanded, but it gives error on where i call addProductsImages and that's wrap on column widget.
List imageList=["assets/img/pepsi2.jpg","assets/img/pepsi2.jpg"];
addProductsImages(){
if(imageList.length!=0){
Row(
children: [
SizedBox(
height:80,
width: MediaQuery.of(context).size.width*0.8,
child: GridView.builder(
shrinkWrap:true,
itemCount: imageList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:4, ),
itemBuilder: (BuildContext context,int index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children:[
ClipRRect(borderRadius: BorderRadius.circular(10.0),
child: Image(image: AssetImage(imageList[index]))),
Align(
alignment: Alignment.topRight,
child: buildCancelIcon(
color,
() {
setState(() {
imageList.removeAt(index);
print(imageList[index]);
});
},
Icons.cancel
))]
),
);})),
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Align(
alignment: Alignment.topLeft,
child: customImageButton(
context,
"+",
() {
pickMultipleImage();},
MediaQuery.of(context).size.width * 0.3,
MediaQuery.of(context).size.height * 0.13)),
),
SizedBox10(),
]);}
else {
return Padding(
padding: const EdgeInsets.only(left: 70),
child:
Row(crossAxisAlignment: CrossAxisAlignment.center, children: []));
}
}
Error:
A RenderFlex overflowed by 151 pixels on the right.
Ouptut:
please help how to do this.

Answer 1

remove your width of SizedBox and wrap Expanded to it:
Expanded(child:
SizedBox(
height:80,
child: GridView.builder(