Flutter's MediaQuery rectangle seems incorrect - flutter

Question

A Rect with a top-left at (0, 0) and sized MediaQuery.of(context).size should match exactly the rectangle left after the AppBar rectangle is present.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(scaffoldBackgroundColor: const Color(0xFF80EFEF)),
home: Scaffold(
appBar: AppBar(
title: Text('MyApp'),
),
body: MyWidget()));
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var deviceData = MediaQuery.of(context);
return CustomPaint(painter: MyPainter(appSize: deviceData.size));
}
}
class MyPainter extends CustomPainter {
Size appSize;
MyPainter({this.appSize});
#override
void paint(Canvas canvas, Size size) {
var paint = Paint()..color = Colors.indigo;
const double margin1 = 70;
canvas.drawRect(
Rect.fromLTWH(margin1, margin1, appSize.width - 2 * margin1,
appSize.height - 2 * margin1),
paint);
}
#override
bool shouldRepaint(MyPainter oldDelegate) => false;
}
As you see here:
it does not. It protrudes (when targeting chrome) from the bottom. We're only able to see that when we use a margin to reduce the rectangle's size.
Why does the rectangle not match the expected area? Is this a bug?

Answer 1

You can use layoutbuilder to know the exact remaining space left.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('LayoutBuilder Example')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Text('Width: ${constraints.maxWidth} Height: ${constraints.maxHeight}');
},
),
);
}

Answer 2

When we write a Widget class such as
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var deviceData = MediaQuery.of(context);
return CustomPaint(painter: MyPainter(appSize: deviceData.size));
}
}
and make a MediaQuery.of(), the context that we are querying is not that of MyWidget. It is the context of the parent of MyWidget in the widget objects tree.
In this case the parent is the Scaffold. Hence the context we get does include the AppBar!
(To make it clearer, it would perhaps be more apt to write parentContext, rather than context.)
The solution is to add an intermediate "dummy" parent widget that has the correct dimensions.
This does not need to be a full-fledged new class. Using either Builder or LayoutBuilder is enough.
Using Builder doesn't cut it (why?)
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFF80EFEF)),
home: Scaffold(
appBar: AppBar(
title: Text('MyApp'),
),
body: Builder(
builder:
(BuildContext context) {
return MyWidget();
},
)));
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var deviceData = MediaQuery.of(context);
return CustomPaint(painter: MyPainter(appSize: deviceData.size));
}
}
Hence we need to use, as in Ayad's answer, LayoutBuilder.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFF80EFEF)),
home: Scaffold(
appBar: AppBar(
title: Text('MyApp'),
),
body: LayoutBuilder(
builder:
(BuildContext context, constraints) {
return MyWidget(size: Size(constraints.maxWidth, constraints.maxHeight));
},
)));
}
}
class MyWidget extends StatelessWidget {
Size size;
MyWidget({this.size}) {}
#override
Widget build(BuildContext context) {
return CustomPaint(painter: MyPainter(appSize: size));
}
}
We then see that we have the correct Size.