Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Stacking two containers in Flutter

I am trying to stack lets say Container B on Container A like in following picture, but it’s not working in my case, must be an error in positioning the widgets.

My code:
body: Stack(
        children: [
          Column(
            children: [
              Container(
                //this contains content of container A with a width of maxFinite and height of 300.
              ),
//here comes the 2nd container that i want to stack over first one like in picture.
              Positioned(
                top: 50,
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  width: double.maxFinite,
                  height: 500,
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(25.0), topRight: Radius.circular(25.0)),
                  ),
                ),
              ),
            ],
          ),
      ],
      ),

enter image description here

If anyone can guide me, thanks.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

do it as following:

enter image description here

body: Column
children: [
Stack(
//Container A comes here
//Container B comes here wrapped with positioned and top:260, i have set the color to white
),
Container(
//give it the same color as to Container B and give it max height, and add your rest code here),
],
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading