0

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

enter image description here

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;
}
Greg
  • 34,042
  • 79
  • 253
  • 454
  • Does the MediaQuery work out the whole screen, not just the widget size.ie remove the size of the AppBar from the logicHeight. – Glen Jan 14 '21 at 04:32
  • @Glen - is there a way to get AppBar size? Would I need to also take into account padding/viewInsets also available in MediaQuery too). – Greg Jan 14 '21 at 04:35
  • You can use PreferredSize to set set the appBar size. Not sure on other settings. – Glen Jan 14 '21 at 04:42
  • instead of `Container > FittedBox > SizedBox > CustomPaint` why dont you simply do `Container > CustomPaint > SizedBox.expand`? – pskink Jan 14 '21 at 04:58
  • was just based on a google video I saw and this article (https://stasheq.medium.com/scale-whole-app-or-widget-contents-to-a-screen-size-in-flutter-e3be161b5ab4) - but I'm just learning - key point was I realised I didn't understand what was happening exactly so pasted this question. – Greg Jan 14 '21 at 05:00
  • @pskink - so would you have SizedBox.expand in your CustomPainter? or did you mean go: Container>SizedBox.expand>CustomPaint? – Greg Jan 14 '21 at 05:08
  • this is what `build` should return: `Container > CustomPaint > SizedBox.expand` - you can add `print(size)` inside `GCPainter.paint` and run your code with and without `SizedBox.expand` and compare results – pskink Jan 14 '21 at 05:09
  • ok thanks I'll try this – Greg Jan 14 '21 at 05:12

1 Answers1

1

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

SafeArea(
 child: Container(),
 top: true,
 bottom: true,
)
Jim
  • 6,928
  • 1
  • 7
  • 18
  • thanks - but then setting my logical height I use I'd need to dynamically calcaulate this a different way then? Would I need to complete the MediaQuery "size" and also subtract its "padding" (I see there are viewInsets and viewPadding too?) – Greg Jan 14 '21 at 04:32
  • or would there be a better way to dynamically get actual remaining size? – Greg Jan 14 '21 at 04:33
  • LayoutBuilder! LayoutBuilder! Never call MediaQuery for the size again! – Randal Schwartz Jan 14 '21 at 04:42
  • @RandalSchwartz - I guess my specific question was how to calculate the correct size in this case (i.e. this question). [however noted that separate to this question moving forward should use another approach perhaps] – Greg Jan 14 '21 at 05:01
  • perhaps should accept this answer as answer question in general re why this is occuring, but not also try to find the "fix" as one should not be trying to obtain specific screen or widget sizes for canvas layout? – Greg Jan 14 '21 at 05:04
  • i think you need to elaborate more what you want to show eventually, cos as in the image, you can achieve it by setting appbar and simple container with padding in Scaffold with red background color – Jim Jan 14 '21 at 05:38