App Bar height calculations with MediaQuery fail - flutter

Question

I am building an app where I wanted to show 4 containers covering the whole available space of on the phone.
For that I am getting the full width and height of the screen using MediaQuery.of. I make the 4 containers fill the entire screen by giving each of them a height of 0.25 of the total height.
The initial code comes here and works fine:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(body: MyHomePage(title: 'Title')),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return _buildMobileLayout(context);
}
Widget _buildMobileLayout(BuildContext context) {
AppBar appBar = AppBar(
title: Text("My App Title"),
);
// var newHeight =
// (MediaQuery.of(context).size.height - appBar.preferredSize.height) *
// 0.25;
var newHeight = (MediaQuery.of(context).size.height) * 0.25;
return Scaffold(
//appBar: appBar,
body: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: newHeight,
child: Center(child: Text("Cont 1")),
),
Container(
width: MediaQuery.of(context).size.width,
height: newHeight,
child: Center(child: Text("Cont 2")),
),
Container(
width: MediaQuery.of(context).size.width,
height: newHeight,
child: Center(child: Text("Cont 3")),
),
Container(
width: MediaQuery.of(context).size.width,
height: newHeight,
child: Center(child: Text("Cont 4")),
),
],
),
);
}
}
As you can see on the code above, I am not including the appBar yet, since here is when the problem comes. All works ok without the appBar, but when I include the appBar, even though I am taking care of its height, getting a new total height and splitting it among the 4 containers, I get an error by pixel overflow on the last container.
Phone: Huawei P20 Pro.

Answer 1

Instead of using MediaQuery you can wrap each of your widgets in a Expanded and give them the same flex.
return Scaffold(
//appBar: appBar,
body: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Center(child: Text("Cont 1")),
),
Expanded(
flex: 1,
child: Center(child: Text("Cont 2")),
),
Expanded(
flex: 1,
child: Center(child: Text("Cont 3")),
),
Expanded(
flex: 1,
child: Center(child: Text("Cont 4")),
),
],
),
);