Flutter MediaQuery the body size

Question

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?

Answer 1

Try using Column with children wrapped by Expanded , each child will have the same size.

  Column(
        children: <Widget>[
          Expanded(
            child: Container(color: Colors.white),
          ),
          Expanded(
            child: Container(color: Colors.red),
          ),
          Expanded(
            child: Container(color: Colors.green),
          ),
        ],
      );

Answer 2

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