'Flutter MediaQuery the body size

I am trying to create 3 sections in the body, but I would like that these 3 always cover the entire screen.

Container(
        height: MediaQuery.of(context).size.height / 3,
        width: double.infinity,
        color: Colors.red,
      ),

Result Screen

MediaQuery is taking the entire screen as reference, that is why the last section overflow the same height as the appbar.

Is there any way to use the body as a reference for MediaQuery?



Solution 1:[1]

actually yes when you get the height of container inside body

(MediaQuery.of(context).size.height -
 appBaa.preferredSize.height - MediaQuery.of(context).padding.top) * 0.3,

here we give the %30 of body to this container, you must have a reference of appbar in this case its appBaa and get the height of status bar by padding

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Omar Falah