定位的小部件可以工作，但是对齐的小部件在堆栈中的小部件中不起作用

Question

Why when I try to use align in stack with alignment his child don't move , but with positioned it's work (I want use it because I can't center it in all mobile dimension)

This is my code:

 @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _launchURL,
      child: Container(
        child: Container(
          child: Stack(children: <Widget>[
            Column(
              children: <Widget>[
                Container(
                  decoration: new BoxDecoration(
                    border: Border.all(color: Colors.black12),
                    borderRadius: BorderRadius.all(Radius.circular(13)),
                    shape: BoxShape.rectangle,
                    color: Colors.white,
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                        color: Colors.black26,
                        offset: Offset(3, 7),
                        blurRadius: 7.0,
                      ),
                    ],
                  ),
                  height: 140,
                  width: MediaQuery.of(context).size.width * 0.42,
                ),
              ],
            ),
         // this the code when I use the align widget
         // Align(
         //   alignment: Alignment.bottomCenter,
            Positioned(
              top: MediaQuery.of(context).size.width * 0.42 / 7,
              left: 40,
              child: Container(
                child: Column(
                  children: <Widget>[
                    Container(
                      decoration: new BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(16)),
                        shape: BoxShape.rectangle,
                        color: Colors.transparent,
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                            color: Colors.grey,
                            offset: Offset(2, 5),
                            blurRadius: 5.0,
                          ),
                        ],
                      ),
                      child: ClipRRect(
                        borderRadius: new BorderRadius.circular(16.0),
                        child: Image.asset(
                          "assets/RoundStyle/" + socialBadge + ".png",
                          height: 60,
                          width: 60,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    MyText3(
                      "@hisname",
                      color: Colors.grey,
                    )
                  ],
                ),
              ),
            ),
          ]),
        ),
      ),
    );
  }

That's it thank you :)

Answer 1

You don't need a Stack or Column if you want to center your widget inside the Container just add it as a child .

   @override
  Widget build(BuildContext context) {
   return GestureDetector(
   onTap: _launchURL,
   child:   Container(
              decoration: new BoxDecoration(
                border: Border.all(color: Colors.black12),
                borderRadius: BorderRadius.all(Radius.circular(13)),
                shape: BoxShape.rectangle,
                color: Colors.white,
                boxShadow: <BoxShadow>[
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(3, 7),
                    blurRadius: 7.0,
                  ),
                ],
              ),
              height: 140,
              width: MediaQuery.of(context).size.width * 0.42,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    decoration: new BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      shape: BoxShape.rectangle,
                      color: Colors.transparent,
                      boxShadow: <BoxShadow>[
                        BoxShadow(
                          color: Colors.grey,
                          offset: Offset(2, 5),
                          blurRadius: 5.0,
                        ),
                      ],
                    ),
                    child: ClipRRect(
                    borderRadius: new BorderRadius.circular(16.0),
                    child: Image.asset(
                      "assets/RoundStyle/" + socialBadge + ".png",
                      height: 60,
                      width: 60,
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                MyText3(
                  "@BensebaBillal",
                  color: Colors.grey,
                )
                ],
              ),
            ),
            );
     }