Flutter, fill the entire screen - flutter

Question

I am designing an application and I have realized that in different mobiles the screen occupies different dimensions, I would like the size to be proportional to the size of the mobile, so that it always occupies the entire screen without the need to scroll.
I'd like that the Screen A could be look like the Screen B no matter of the size of the device.
But I have no idea how to do that, this is my code. I also noticed that because of cards I can't scrolling even having a ListView this is not a problem once they get the same size, because then there wont be reason to scroll through
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
centerTitle: true,
title: Text('Gestion de flota'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.exit_to_app,
),
onPressed: () async {
_signOut().whenComplete(() =>
navigatorKey.currentState.pushReplacementNamed('/login'));
},
)
],
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Form(
key: _formKey,
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
SizedBox(
height: 20,
),
GridView.count(
childAspectRatio: (10 / 4),
crossAxisCount: 2,
shrinkWrap: true,
children: [
_getHourStart(),
_getHourEnd(),
_getDateStart(),
_getDateEnd(),
],
),
],
),
SizedBox(height: 10),
Column(
children: <Widget>[
GridView.count(
childAspectRatio: (3 / 0.7),
crossAxisCount: 1,
shrinkWrap: true,
children: [
_getHourStart(),
],
),
],
),
SizedBox(height: 10),
GridView.count(
crossAxisCount: 2,
childAspectRatio: (3 / 2),
shrinkWrap: true,
children: [
Card(
child: _uploadPic(Foto.primera, picList[0]),
),
Card(
child: _uploadPic(Foto.segunda, picList[1]),
),
Card(
child: _uploadPic(Foto.tercera, picList[2]),
),
Card(
child: _uploadPic(Foto.cuarta, picList[3]),
),
],
),
SizedBox(height: 20),
InkWell(
onTap: () async { // more code... }
child: SubmitButton(context, 'Enviar datos'),
),
Container(
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.centerRight,
),
SizedBox(height: height * .14),
],
),
),
),
);
}
}

Answer 1

you can use MediaQuery
you retrieve the size of mobile screen by:
final height = MediaQuery.of(context).size.height
final width = MediaQuery.of(context).size.width

Answer 2

One solution to this problem is to add Expanded to all the children in the Column widget.
Another and preferable one is :
make your Container height the height of your screen.
body: Container(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
next add the mainAxisAlignment property to both Column widgets.
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
]