How it should look like

I would like to create a caontainer that have another container inside it at the bottom. Beacuase I am using borders in both of them I can see that they are not overlaying. That looks like this:

Is there a way to make it look like in the first picture?

How it actually looks

My current code is looking like this:

                    Container(
                      height: 364.h,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(
                          width: 5.r,
                        ),
                      ),
                      child: Expanded(
                        child: Align(
                          alignment: FractionalOffset.bottomCenter,
                          child: Container(
                            height: 50.h,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              border: Border.all(
                                width: 5.r,                            
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),

CodePudding user response：

You can use Stack and use alignment to align its children at the bottom.

 Stack(
  alignment: Alignment.bottomCenter,
  children: [
    Container(
      height: 364.0,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          width: 5.0,
        ),
      ),
    ),
    Container(
        height: 50.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            width: 5.0,
          ),
        ),
      )
  ],
);