Search code examples
fluttermedia-queries

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

  • 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),
          ),
        ],
      );