How to get this height with MediaQuery

Issue

Edit: I think my descirption wasn’t all too clear. I need the heigth between app bar und nav bar as a double so I can size other things with that.

I’m done coding the logic for my app and have just started with implementing the design someone made for me. A lot of the elements in my app are scaled according to the available height. The problem, I’m not quite sure how to get that reliably. So…how do I get the height indicated by the red line in the screenshot (taken from the design):

enter image description here

My approach:

availableHeight = MediaQuery.of(context).size.height – appBarHeight – BottomNavHeight – ?

Questions:

  • Is there a way to figure out the height of the bottom navigation? I have the appBarHeight as I control it manually.
  • And what else has to be substracted from the total height? Are there default paddings or anything else?
  • What is the effect, if I wrap everything in a SafeSpace widget? How do I account for that? (Nor sure, if I will yet).

Solution

It looks like you are just trying to get the available area for you to use.

In that case, just use LayoutBuilder widget. It will give you the area available at the spot where you use it.

For example:

return Scaffold(
  appBar: AppBar(title: const Text('LayoutBuilder Example')),
  body: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      print(constraints.maxWidth);
      return FlutterLogo();
    },
  ),
);

Answered By – user1032613

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *