如何将小部件放在两个小部件的中心和顶部？

Question

I am designing a widget where, I want to put widget in the center of two rectangular container. My idea is that when I click on it, center widget becomes visible. It looks like this.

What I wanted to do is that clicking on one grey container or both, this purple widget becomes visible, clicking again, it would disappear. This is my code below.

 Stack(
            alignment: Alignment.center,
            children: [
              Container(
                  width: 70,
                  height: 40,
                color: Colors.indigo,
              ),
              Container(
                width: 100,
                height: 70,
                child: Column(
                  children: [
                    Container(
                      width: 100,
                      height: 30,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                    ),
                    SizedBox(height: 10,),
                    Container(
                      width: 100,
                      height: 30,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),

However, with this the widget hides behind two widgets like this.

Anybody can help me with its positioning?

Answer 1

Here is my answer.

Stack(
                alignment: Alignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 70,
                    child: Column(
                      children: [
                        Container(
                          width: 100,
                          height: 30,
                          decoration: BoxDecoration(
                            color: Colors.grey,
                          ),
                        ),
                        SizedBox(height: 10,),
                        Container(
                          width: 100,
                          height: 30,
                          decoration: BoxDecoration(
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 70,
                    height: 40,
                    color: Colors.indigo,
                  ),
                ],
              ),

Answer 2

Just replace the widgets

 Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 100,
            height: 70,
            child: Column(
              children: [
                Container(
                  width: 100,
                  height: 30,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                  ),
                ),
                SizedBox(height: 10,),
                Container(
                  width: 100,
                  height: 30,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                  ),
                ),

          Container(
              width: 70,
              height: 40,
            color: Colors.indigo,
          ),
              ],
            ),
          ),
        ],
      ),

like stack ;)