flutterflutter-positioned

positioned widget work but align widget don't work in stack widget in flutter


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 :)


Solution

  • 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,
                    )
                    ],
                  ),
                ),
                );
         }