Why my flutter moving overflow when screen size increase - flutter

Question

i have seen a problem in my flutter app which is overflow when screen size increase, how can i solve this solution.
I just used Gridview.builder for printing api product with
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.2),
i have attached container full code below, i need to change span count when screen size increased , for example when user screen width increase ( phone user to tab user)
Container(
width: MediaQuery.of(context).size.width,
child: FutureBuilder(
future: _getProduct(),
builder: (context, snapshot) {
if (snapshot.data == null) {
return CircularProgressIndicator(); //const Center(child: Text("Loading"))
} else {
return LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 4,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:
MediaQuery.of(context)
.size
.width /
(MediaQuery.of(context)
.size
.height /
(MediaQuery.of(context).size.width ~/ 180).toInt()),
mainAxisSpacing: 15,
crossAxisSpacing: 10,
crossAxisCount: (MediaQuery.of(context).size.width ~/ 150).toInt()),
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10)),
child: SizedBox(
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Image.network(snapshot
.data![index].image)),
),
Container(
child: Padding(
padding:
const EdgeInsets.all(10),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Expanded(
child: Text(
snapshot
.data![index].name,
overflow:
TextOverflow.fade,
maxLines: 2,
style: const TextStyle(
fontSize: 15,
fontWeight:
FontWeight.w700),
)),
Text(snapshot
.data![index].price)
],
),
),
)
],
),
),
);
});
}
);
}
}
)
)

Answer 1

You should change childAspectRatio accordingly with your widgets height. This might cover it
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / (MediaQuery.of(context).size.width / 220).toInt()),