flutter code painting Rect bottom line below screen - 为什么（附示例）

Question

即使我打算计算这个，为什么下部 Rect 线仍然在屏幕下方？

代码：

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;
}

Answer 1

尝试管理您的顶部和底部区域以进行缺口或底部控制，SafeArea:

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

flutter code painting Rect bottom line below screen - 为什么（附示例）

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

flutter

flutter-layout

flutter-canvas