Calculating 100% height in flutter - flutter

Question

I found some topics about calculating height in flutter, but noone of them answered my question. I am trying to calculate 100% of device height in flutter. I assume, I have to subtract from MediaQuery.of().size.height two things. First is AppBar height, so I calculated it by creating variable appBar and get property preferredSize.height. Second is the bar above appBar (which contains things like battery status, notifications etc.).
This is the simplest example:
#override
Widget build(BuildContext context) {
var appBar = AppBar(
title: Text(widget.title),
);
return Scaffold(
appBar: appBar,
body: Center(
child: Builder(
builder: (ctx) => Column(
children: <Widget>[
Container(
height: MediaQuery.of(ctx).size.height -
MediaQuery.of(ctx).padding.top -
appBar.preferredSize.height,
color: Colors.red,
)
],
),
),
),
);
}
This is my main Widget so I had to create context with Builder. However, it is not still equal to 100% of device height. It is 24px too much. I don't want to subtract 24px because It might be more/less on another device. What is wrong with this example?

Answer 1

You don't need to do anything special to the child of the Scaffold. Unless the child widget manages its own sizing, it will fill the entire remainder of the area inside of the Scaffold by default. In the case of Container, its behavior is to shrink wrap to the size of its child, but if it doesn't have a child, it will fill all available space. So you can just do this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Container(
color: Colors.red,
),
);
}
Depending on the child widget, you may need to manually configure a size, but most layout widgets either you won't need to worry about it or it just takes a bit of configuration. With Column, for example, if you set mainAxisSize: MainAxisSize.max and crossAxisAlignment: CrossAxisAlignment.stretch, then it will also automatically stretch to fill all available space. You can then make use of Expanded to size its children based on available space as well.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Colors.red),
),
Expanded(
child: Container(color: Colors.green),
),
Expanded(
flex: 2,
child: Container(color: Colors.yellow),
),
],
),
);
}
However, on the seldom occasion you need the exact numbers of the space available, you don't usually want to use MediaQuery as that will get you the size of the entire screen, not just the available space, and you usually will have to perform additional calculations to boil it down to the size you are actually looking for (which usually leads to incorrect results, as you have discovered).
Instead, you can use a LayoutBuilder. A word of caution here, you don't want to abuse LayoutBuilder as it adds an additional layout step to its children, so having a lot of them in your code can easily slow down your app.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.biggest.width;
final height = constraints.biggest.height;
return Center(
child: Text('Width: $width, Height: $height'),
);
},
),
);
}