Flutter screen size without AppBar and BottomNavigationBar

user_9171521 0
Viewed 443

I am trying to get the exact size of the screen without taking into account the AppBar and BottomNavigationBar

Here is the code:

double screenSize = MediaQuery.of(context).size.height;
double height = screenSize - kToolbarHeight - kBottomNavigationBarHeight;
  return SingleChildScrollView(
    child: Column(
      children: [
        SizedBox(
          height: height / 2,
          child: Container(
            color: Colors.red,
          ),
        ),
        SizedBox(
          height: height / 2,
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  );

By doing this I am getting a height that is slighly bigger than the actual screensize withouth AppBar and BottomNavigationBar

In the screenshots below you can see how I can scroll a little bit

enter image description here

enter image description here

How can I calculate the exact height of that screen area?

Thanks for reading me and helping!

flutter-layout flutter
2 Answers

Getting width is easy but height can be tricky, Please follow steps it will help you..

   double heightWithoutappBarNavBar = MediaQuery.of(context).size.height - (kBottomNavigationBarHeight + kToolbarHeight);
user_43535940

This should do it.

MediaQuery.of(context).size.height - (MediaQuery.of(context).padding.top + kToolbarHeight + kBottomNavigationBarHeight)

I think there is a default top padding you have to remove

user_24852960
Related