title: Get size of screen without bottom navigation bar height
body: <p>So the basic scaffold in flutter has appbar, body and bottom bar.</p>
  <p>in my bottom navigation bar I have 3 items:</p>
  <ol>
  <li>Page 1 (Editor Page)</li>
  <li>page 2 (Stickers)</li>
  <li>page 3 (Text Customization Page)</li>
  </ol>
  <p>Each of these pages have their own scaffolds.</p>
  <p>Editor page has a widget called LayoutCanvas which is something like:</p>
  <pre><code>  Widget build(BuildContext context) {
      WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
        CanvasModel.of(context).init(canvasKey!);
      });
      return Container(
  </code></pre>
  <p>Inside <code>init</code>:</p>
  <pre><code>  void init(GlobalKey canvasKey) {
      _canvasKey = canvasKey;
      final context = _canvasKey.currentContext;
      if (context == null) return;
      final bounds = context.findRenderObject()!.paintBounds;
  
      final screenHeight = MediaQuery.of(context).size.height;
      final screenWidth = MediaQuery.of(context).size.width;
  
      var canvasHeight = screenHeight * 0.7;
      var canvasWidth = layout.aspectRatio * canvasHeight;
  </code></pre>
  <p><strong>Issue:</strong></p>
  <p>As you can see I'm taking 0.7 or 70% of the screen height as the canvas height and calculating the rest from there. But 70% is quite small for something like an editor canvas. But if I make it 80% some of the editor is getting cut by the bottom navigation bar.</p>
  <p>Maybe the <code>screenHeight</code> is not taking the bottom navigation bar height into consideration?</p>
  <p>I either need to make it dynamic or I need to subtract the bottom nav height from <code>screenHeight</code>.</p>
  <p><strong>aspectRatio:</strong></p>
  <p><code>double get aspectRatio =&gt; isInitialized ? height / _layout!.height : 0;</code></p>
  <p>How can I solve this issue?</p>