How can I measure the specific height in the flutter?

Question

I have no idea to figure out this problem in flutter. I want to know the size without app bar size and tab bar size(up).

I use variable "vertical_size" as

var vertical_size = (MediaQuery.of(context).size.height -
                AppBar().preferredSize.height -
                MediaQuery.of(context).padding.top);

but I didn't figure out the tab bar size. It's mean there are oversized in Iphone. (Android is okay in now...)

Do you have any idea to measure tabbar height using Mediaquery? Or is there any idea to measure the actual using area?

score 1 · Answer 1 · answered Feb 08 '21 at 17:15

You can always figure out the free space in any place you want in your layout with LayoutBuilder

In case of full usable screen height, you can use MediaQuery, but aparat from appbar's height and top padding, remember about bottom padding. You need to substract it as well

score 0 · Answer 2 · answered Feb 08 '21 at 15:44

Hi and welcome to StackOverflow.

It's not oversized in iOS. What happens is that the AppBar will have in consideration the safe area, hence, its heigh will be bigger/smaller based on the device it is running on.

If you want to get the height of the screen without the AppBar heigh, just do it as the following:

Widget build() {
  AppBar appBar = AppBar();

  double vertical_size = MediaQuery.of(context).size.height - appBar.preferredSize.height;

  return Scaffold(
    appBar: appBar,
    body: // your widget
  );
}

The AppBar's height will have in consideration the device's status bar and so on, so there's no need to remove the inset padding manually.

How can I measure the specific height in the flutter?

2 Answers2