flutter code painting Rect bottom line below screen - why (example attached)

Question

Why does the lower Rect line go below the screen even through I've aimed to calculate this?

Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        ),
        body: MainScreen(),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var mq = MediaQuery.of(context);
    final logicWidth = mq.size.width;
    final logicHeight = mq.size.height;
    return 

    SizedBox.expand(
        child: Container(
            color: Colors.blueGrey,
            child: FittedBox(
                fit: BoxFit.none,   // Can more to "contain" after
                alignment: Alignment.topLeft,
                child: SizedBox(
                  width: logicWidth,
                  height: logicHeight,
                  child: CustomPaint(painter: GCPainter(),),
                ))));
  }
}

class GCPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()..color = Colors.red..style = PaintingStyle.stroke..strokeWidth = 50;
    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, paint1);
  }

  @override
  bool shouldRepaint(GCPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(GCPainter oldDelegate) => false;
}

question from:https://stackoverflow.com/questions/65713411/flutter-code-painting-rect-bottom-line-below-screen-why-example-attached

Answer 1

Try to manage your top and bottom area for notch or bottom control, SafeArea:

SafeArea(
 child: Container(),
 top: true,
 bottom: true,
)