Flutter container inside a container using a widget

Question

I want to add two boxes, one inside another. Here's my code and its not working for two boxes. how should I correct this. doc UI in this doc you can see the UI I implement so far and the UI I want to be implement.

Widget DetailBox() => Padding(
  padding: const EdgeInsets.only(left: 25, right: 25),
  child:Column(
    children: [
      Container(
          decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          color: Colors.white,
      ),
      // alignment: Alignment.bottomCenter,
      height: 400,
      width: 300,


        child:   Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            color: Colors.lightBlue,
          ),
          // alignment: Alignment.bottomCenter,
          height: 100,
          width: 300,
      ),
      ),
    ],
  ),
);

by two boxes you mean purple and white one as seen in design ? — hiashutoshsingh
– hiashutoshsingh, Commented Jan 27, 2022 at 5:41
Use a card and inside a Column and take two Container and both Container wrap to expanded and 1 expanded flex =1 and second flex 3 — Anmol Mishra
– Anmol Mishra, Commented Jan 27, 2022 at 5:49

Anmol Mishra · Accepted Answer · 2022-01-27 06:19:43Z

May it help you

 Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
          elevation: 5,
          shadowColor: Colors.blue.shade200,
          child: Column(
            children: [
              Expanded(
                flex: 1,

                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.lightBlueAccent,
                    borderRadius: BorderRadius.only(topLeft:Radius.circular(25),topRight:Radius.circular(25))
                  ),


                ),
              ),
              Expanded(
                flex: 3,
                child: Container(

                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(bottomRight:Radius.circular(25),bottomLeft:Radius.circular(25))
                  ),


                ),
              )
            ],
          ),

        ),

According to the design of the app, put the image in the bule box.

Collectives™ on Stack Overflow

Flutter container inside a container using a widget

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related