user-interface - Flutter Stack 和 Card 使用

Question

我希望它看起来像第一张图片，但我找不到方法，请帮忙？

我尝试为此堆叠和定位小部件，但是当我使用定位小部件顶部或左侧负值时，我的容器似乎无法处理它。

我的主要问题是我无法将绿色圆圈容器从卡片区域中取出

Stack(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Center(
                            child: Container(
                              width: 52,
                              height: 52,
                              decoration: BoxDecoration(
                                color: Color(0xffDCDCDC),
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 0,
                          left: 0,
                          child: Container(
                            width: 31,
                            height: 19,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Color(0xffE9E9E9),
                            ),
                            child: Container(
                              margin: EdgeInsets.only(left: 12),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white),
                              child: Container(
                                width: 15,
                                height: 15,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Color(0xff5CE02E)),
                              ),
                            ),
                          ),
                        ),

标签： user-interfaceflutterfrontend

Answer 1

Stack(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Center(
                            child: Container(
                              width: 52,
                              height: 52,
                              decoration: BoxDecoration(
                                color: Color(0xffDCDCDC),
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 10,
                          left: 10,
                          child: Container(
                            width: 31,
                            height: 19,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Color(0xffE9E9E9),
                            ),
                            child: Container(
                              margin: EdgeInsets.only(left: 12),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white),
                              child: Container(
                                width: 15,
                                height: 15,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Color(0xff5CE02E)),
                              ),
                            ),
                          ),
                        ),