Container in flutter

Question

Hope you all are doing well. I am making a flutter application. In this interface I am having a issue. I am making a container and circle avatar which are in stack. In stack, in first widget container there is also another container. When I set image as a child to inner container it also applied to outer container. Why is this happening and what is the solution of this problem.

Stack(
                  children: [
                    // Container(child:
                    Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                        color: Colors.indigo,
                      )),
                      width: 340,
                      height: 200,
                      child: Container(
                        child: Image.asset(
                          'assets/pic1.jpg',
                          fit: BoxFit.cover,
                        ),
                        width: 340,
                        height: 150,
                        decoration: BoxDecoration(
                            border: Border.all(
                          color: Colors.black,
                        )),
                      ),
                    ),
                    Positioned(
                        bottom: 10,
                        right: 10,
                        child: CircleAvatar(
                          backgroundColor: Colors.grey,
                          radius: 40,
                        ))
                  ],
                )

Answer 1

I think You just need to Alignment Property to your Parent widget otherwise child widget will not care about height and width

 Stack(
    children: [
      // Container(child:
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
            border: Border.all(
              color: Colors.indigo,
            )),
        width: 340,
        height: 200,
        child: Container(
          child: Image.asset(
            'assets/pic1.jpg',
            fit: BoxFit.cover,
          ),
          width: 340,
          height: 150,
          decoration: BoxDecoration(
              border: Border.all(
                color: Colors.black,
              )),
        ),
      ),
      Positioned(
          bottom: 10,
          right: 10,
          child: CircleAvatar(
            backgroundColor: Colors.grey,
            radius: 40,
          ))
    ],
  )

You can also follow the below article to get more information. https://www.kindacode.com/article/flutter-sizing-a-container-inside-another-container/#:~:text=To%20size%20a%20Container%20that,expand%20to%20its%20parent's%20constraints.