Container Height for Listview and Gridview - flutter

Question

Both Listview and Gridview needs height to be shown into our app.
But each model of phone has different size as height so it is impossible to define static height of the parent container of the list.
What I need to put as height for the container once use listview and gridview to cover all the phone model ?
Code:
Container(
height: 500,
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (BuildContext context, int index){
return GestureDetector(
onTap: () => showDialog(
context: context, builder: (context) => AlertDialog(
actions: [
Image.asset(widget.user.imageUrl),
Text(widget.user.name),
],
)
),
child: Card(
elevation: 5,
child: Image.asset(widget.user.imageUrl),
),
);
},
),
),
in this specific case height is 500 and it is good for some mobile phone but for other no, please let me know.

Answer 1

You can use screen height width for make it responsive according to devices:
height: MediaQuery.of(context).size.height * 0.1 //It takes 1 of 10 proportion of screen height
width: MediaQuery.of(context).size.width* 0.2 //It takes 2 of 10 proportion of screen width

Answer 2

You can place your GridView or ListView inside Expanded widget. The Expanded widget will take all the available space & you can easily show your GridView or ListView widget.
This solution will work on multiple screen sizes also without any problem because it will occupy the available space on its own.
Column(
children: [
// Any other widget
Expanded(
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (BuildContext context, int index){
return GestureDetector(
onTap: () => showDialog(
context: context, builder: (context) => AlertDialog(
actions: [
Image.asset(widget.user.imageUrl),
Text(widget.user.name),
],
),
),
child: Card(
elevation: 5,
child: Image.asset(widget.user.imageUrl),
),
);
},
),
),
// Any other widget
],
),