I want to have 4 containers under each other. But the red container is above the others when I write it like this

Question

     Container(
       color: BColors.tealBackground,
       height: MediaQuery.of(context).size.height,
     ), 
     Container(
       color: BColors.greenBackground,
       height: MediaQuery.of(context).size.height / 2,
     ),  
     Container(
       color: BColors.yellowBackground,
       height: MediaQuery.of(context).size.height / 2/2,
     ),

I think something is wrong with the last Container, because the color is over the other. How should i can the "1/2" so that they are in order?

     Container(
       color: BColors.redBackground,
       height: MediaQuery.of(context).size.height ***, // I do not know what to do with this Container, when i delete this one it looks like the image.
     )

Answer 1

wrap container with Column

 Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          color: Colors.teal,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.green,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.yellow,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.red,
          height: MediaQuery.of(context).size.height / 4,
        )
      ],
    );
  }