Flutter constraint doesn't fit on any screen size, why? - android-studio

Question

In my flutter code, I'm trying to make a layout constraint that can fit on multiple screen sizes but on my two emulators which one is 6" and the other is 10", the layout is either too small or too big. why? the layout contains one Column and four rows. the code below shows only the first row. I'd like the squares on the first row to fill in the space side to side automatically. the three bottom rows are hardcoded so disregard them. focused with your answer only on the first row.
here's the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.deepOrangeAccent[100],
appBar: AppBar(
title: Center(child: Text('Kakuro SideKick III')),
backgroundColor: Colors.blueGrey[900],
),
body: Column(mainAxisAlignment: MainAxisAlignment.end,
//crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
print('Just clicked on 1');
},
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 40.0,
minHeight: 40.0,
maxWidth: 150.0,
maxHeight: 150.0,
),
child: Container(
color: Colors.cyan,
width: double.infinity,
height: double.infinity,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('1'))),
),
GestureDetector(
onTap: () {
print('Just clicked on 2');
},
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 40.0,
minHeight: 40.0,
maxWidth: 150.0,
maxHeight: 150.0,
),
child: Container(
color: Colors.cyan,
width: double.infinity,
height: double.infinity,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('2')),
),
),
GestureDetector(
onTap: () {
print('Just clicked on 3');
},
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 40.0,
minHeight: 40.0,
maxWidth: 150.0,
maxHeight: 150.0,
),
child: Container(
color: Colors.cyan,
width: double.infinity,
height: double.infinity,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('3')),
),
),
GestureDetector(
onTap: () {
print('Just clicked on 4');
},
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 40.0,
minHeight: 40.0,
maxWidth: 150.0,
maxHeight: 150.0,
),
child: Container(
color: Colors.cyan,
width: double.infinity,
height: double.infinity,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('4')),
),
),
],
),
6" layout
10" Layout

Answer 1

To answer the question why is rather easy: you're setting explicit constraints (ie. min. and max. height/width), and the widgets cannot shrink/expand beyond that, so they (in most cases, anyway) either overflow the screen, or don't fill it.
What you're trying to achieve can be done using Expanded. If you want to retain the 1:1 aspect ratio, then use it in combination with AspectRatio.
Like so:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 1');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('1'))),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 2');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('2'))),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 3');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('3'))),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 4');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
padding: EdgeInsets.all(40.0),
margin: EdgeInsets.all(5.0),
child: Text('4'))),
),
),
],
)

Answer 2

Try to use MediaQuery instead a number, it looks like:
minWidth: MediaQuery.of(context).size.width
Exists two ways to use MediaQuery in this case:
MediaQuery.of(context).size.width (takes the whole width from the screen)
MediaQuery.of(context).size.height (the same, but for height)
You can make an calc with that, for exemple:
MediaQuery.of(context).size.width * 0.1 (10% from the whole width)
MediaQuery.of(context).size.height* 0.05 (5% from the whole height)
Try it.