How to detect toolbar area height on devices?

Question

In my application the screen is divided 2 sections. Bottom section has controls and top section has an image. Top section is 75% of the total screen size.

And I want to place image in the middle of that section.

I got the height of the screen with

MediaQuery.of(context).size.height

then bottom and top area curved area with

MediaQuery.of(context).padding.top
MediaQuery.of(context).padding.bottom

But on iPhoneX padding top and bottom always return 0

The screen height seems to include these 2 areas. How do I detect these area sizes?

https://stackoverflow.com/questions/50075945/how-to-get-appbar-height-in-flutter check this link — Mobin Ansar, Mar 22 '23 at 10:50
Does this answer your question? [How to get AppBar height in Flutter](https://stackoverflow.com/questions/50075945/how-to-get-appbar-height-in-flutter) — nramirez, Mar 22 '23 at 10:57
Thank you for your answers. My problem is getting padding top/bottom values as 0. — Janaka, Mar 22 '23 at 12:20

score 0 · Answer 1 · answered Mar 22 '23 at 15:31

0

It's not clear why you need to know the toolbar height.

You can simply wrap the body of your Scaffold widget in SafeArea widget. Then you give 75% to the top container. Then you add your image as a decoration with whatever fit property that you need. If images can be smaller, instead of adding image as a decoration, you can add it as Image widget wrapped in Center widget.

answered Mar 22 '23 at 15:31

Andrei Volgin

40,755
6
49
58

The problem is the image needs to be scaled. Also it can be paned. So I need to make sure it remain within the bounding area. – Janaka Mar 27 '23 at 03:35
Why is this a problem? – Andrei Volgin Mar 30 '23 at 01:51
I need to know the exact height of the area, so I can stop scaling the image when the edge reach the bounding area. Basically I need to know the height of safe area. – Janaka Mar 30 '23 at 02:24
You can tell a Widget in Flutter to "take as much space as is available to you". There is no need to know the dimensions in pixels. You see a problem that does not exist. – Andrei Volgin Mar 30 '23 at 15:53
I am scaling the image with Transform.scale. If I do not control the scale it will go beyond available area. It will NOT throw overflow error. Is there a way to restrict the scale to available area? – Janaka Mar 31 '23 at 02:35
In the starting state the image does fit the container properly. After that I am scaling and translating the container. – Janaka Mar 31 '23 at 02:40

How to detect toolbar area height on devices?

1 Answers1