Get size of screen without bottom navigation bar height - flutter

Question

So the basic scaffold in flutter has appbar, body and bottom bar.
in my bottom navigation bar I have 3 items:
Page 1 (Editor Page)
page 2 (Stickers)
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?

Answer 1

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

Answer 2

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