So the basic scaffold in flutter has appbar, body and bottom bar.

in my bottom navigation bar I have 3 items:

1. Page 1 (Editor Page)
2. page 2 (Stickers)
3. page 3 (Text Customization Page)

Each of these pages have their own scaffolds.

Editor page has a widget called LayoutCanvas which is something like:

  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      CanvasModel.of(context).init(canvasKey!);
    });
    return Container(

Inside init:

  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;

Issue:

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.

Maybe the screenHeight is not taking the bottom navigation bar height into consideration?

I either need to make it dynamic or I need to subtract the bottom nav height from screenHeight.

aspectRatio:

double get aspectRatio => isInitialized ? height / _layout!.height : 0;

How can I solve this issue?

CodePudding user response：

you can use MediaQuery.of(context).size.width and MediaQuery.of(context).size.height

CodePudding user response：

To get the maximum available height you need to distract some values from MediaQuery.of(context).size.height. Assuming that you have a top AppBar and a BottomNavigationBar, you can use this formula:

MediaQuery.of(context).size.height -    // total height 
  kToolbarHeight -                      // top AppBar height
  MediaQuery.of(context).padding.top -  // top padding
  kBottomNavigationBarHeight            // BottomNavigationBar height