Flutter converting MainAxisSize.max to float - flutter

Question

So I'm building a flutter app, a screen contains a column with four containers. I haven't specified the containers heights as I want them to take up the whole screen. Is there a way to convert the mainAxisSize to a float so that I can set the height of the containers to a quarter of the axis size. Thanks

Answer 1

For the containers you can use the attribute heigth. Then, you can use
screenHeigth=MediaQuery.of(context).size.heigth to obtain the heigth size of the phone you are using. Last of all, you can set the Containes' heigth attribute to: screenHeigth*0.25
So, each of them are 1/4 of the screen size high!

Answer 2

Here's the quick solution I think you are looking for. If not, let me know what to achieve other than this:
Demo:
**Code: **
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
// Getting Quarter Height of the screen
double qtrScreen = MediaQuery.of(context).size.height * 0.25;
return Scaffold(
body: Column(
children: [
Container(
color: Colors.red,
height:
qtrScreen, // Providing the Quarter height to all Containers
),
Container(
color: Colors.green,
height: qtrScreen,
),
Container(
color: Colors.blue,
height: qtrScreen,
),
Container(
color: Colors.orange,
height: qtrScreen,
),
],
),
);
}
}

Answer 3

You can use expanded and define flex property as you need. You don't need to create values using media query as it makes the code more complex for beginners.