Dart 如何在flatter中堆叠相互重叠的小部件

我需要像这样堆叠小部件：

我写了下面的代码。然而，硬币一个接一个地出现，带有一些默认的填充物。我怎样才能得到像上面图片一样的东西

行(
儿童：[
图标(
Icons.monetization_on，尺寸：36.0，
颜色：常量颜色。来自RGBO（218165 32 1.0），
),
图标(
Icons.monetization_on，尺寸：36.0，
颜色：常量颜色。来自RGBO（218165 32 1.0），
),
],
),

您可以使用with来实现这一点：

class StackExample扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar:新的appBar（），
主体：新容器(
填充：常数边集全部（8.0），
高度：500.0，
宽度：500.0，
//对齐：分馏loffset.center，
子：新堆栈(
//对齐：新对齐（x，y）
儿童：[
新图标（Icons.monetization\u on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
新定位(
左：20.0，
子：新图标（Icons.monetization\u on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
),
新定位(
左：40.0，
子：新图标（Icons.monetization\u on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
)
],
),
),
)
;
}
}

这就是你如何得到一些漂亮的阴影，使图标更加突出：

class StackExample扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar:新的appBar（），
主体：新容器(
填充：常数边集全部（8.0），
高度：500.0，
宽度：500.0，
//对齐：分馏loffset.center，
子：新堆栈(
//对齐：新对齐（x，y）
儿童：[
新容器(
装饰：新盒子装饰(
边界半径：边界半径。圆形（25.0），
boxShadow：[
新盒影(
半径：5.0，
偏移量：常数偏移量（3.0,0.0），
颜色：颜色。灰色，
)
]
),
子：新图标（Icons.monetization\u on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
新定位(
左：20.0，
子容器：新容器(
装饰：新盒子装饰(
边界半径：边界半径。圆形（25.0），
boxShadow：[
新盒影(
半径：5.0，
偏移量：常数偏移量（3.0,0.0），
颜色：颜色。灰色，
)
]
),
子：新图标（Icons.monetization\u on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
),
新定位(
左：40.0，
子容器：新容器(
装饰：新盒子装饰(
边界半径：边界半径。圆形（25.0），
boxShadow：[
新盒影(
半径：5.0，
偏移量：常数偏移量（3.0,0.0），
颜色：颜色。灰色，
)
]
)
，子：新图标（Icons.monetization_on，大小：36.0，颜色：const color.fromRGBO（218165,32,1.0）），
)
],
),
),
)
;
}
}

自2019年11月起我想添加第二个解决方案：

使用软件包：

这将与行单元格重叠20个像素

此解决方案与使用

Stack

的解决方案的不同之处在于

将
小部件定位在
堆栈中
不会占用空间。因此，除非您事先知道其大小，否则无法使
堆栈
成为其内容的大小。但是，
RowSuper
将具有其所有子窗口小部件的大小

注意，还有一个
列super
。还请注意，我是这个软件包的作者。
我想要的东西没有依赖性，没有硬编码的布局。
您可以通过使用媒体查询使重叠以%为单位进行增强

Widget重叠（）{
最终重叠=10.0；
最后项目=[
CircleAvatar（子对象：文本（'1'），背景颜色：Colors.red），
CircleAvatar（子对象：文本（'2'），背景颜色：Colors.green），
CircleAvatar（子对象：文本（'3'），背景颜色：Colors.blue），
];
List stackLayers=List.generate（items.length，（索引）{
返回填充(
填充：EdgeInsets.fromLTRB（index.toDouble（）*重叠，0,0,0），
子项：项[索引]，
);
});
返回堆栈（子级：堆栈层）；
}
这是我在个人资料图片上的代码，与颤振中的相机图像重叠

输出：

使用
OverflowBox
包装元素并给出
maxWidth
值将实现此效果

以下内容可用于行或列表视图

 return SizedBox(
            width: 35, //--> list children will be 35 in width
            child: OverflowBox(
              maxWidth: 50, // --> allowing the child to overflow will cause overlap between elements
              child: Container(
                width: 50,
                child: Text((index + 1).toString()),
              ),
            ),
          );
    

假设我们想把它放在屏幕中央？我们需要更改每个定位小部件的left属性，对吗
new Center（child:new StackExample（））
我不确定为什么会发生这种情况，但当我尝试设置
对齐：分数偏移。Center，
它居中，但被其他元素溢出我遇到了同样的问题，现在我尝试使用
定位。从相对竖立
啊，我知道为什么，我们需要在
堆栈中显式设置
overflow:overflow.visible，
确定，所以我在
class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          // alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              new Positioned(
                left: 20.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                  child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              ),
              new Positioned(
                left:40.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                )
                  ,child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              )

            ],
          ),
        ),
      )
    ;
  }
}

var widget1 = ...;
var widget2 = ...;

RowSuper(  
  children: [widget1, widget2],    
  innerDistance: -20.0,
  );

 Widget overlapped() {
    final overlap = 10.0;
    final items = [
      CircleAvatar(child: Text('1'), backgroundColor: Colors.red),
      CircleAvatar(child: Text('2'), backgroundColor: Colors.green),
      CircleAvatar(child: Text('3'), backgroundColor: Colors.blue),
    ];

    List<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
      return Padding(
        padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
        child: items[index],
      );
    });

    return Stack(children: stackLayers);
  }

Container(
    constraints: new BoxConstraints(
      maxHeight: 200.0,
      maxWidth: 200.0
    ),
    padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        image: new AssetImage('assets/images/profile.png'),
        fit: BoxFit.cover,
      ),
    ),
    child: Stack(
      children: [
        new Positioned(
          right: 0.0,
          bottom: 3.0,
          child: Container(
            constraints: new BoxConstraints(
                maxHeight: 50.0,
                maxWidth: 50.0
            ),
            decoration: new BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color:Color(0xFFdedede),
                  offset: Offset(2,2)
                ),
              ],
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: GestureDetector(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(
                  Icons.photo_camera,
                  size: 34,
                  color: Color(0xFF00cde7),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  )

 return SizedBox(
            width: 35, //--> list children will be 35 in width
            child: OverflowBox(
              maxWidth: 50, // --> allowing the child to overflow will cause overlap between elements
              child: Container(
                width: 50,
                child: Text((index + 1).toString()),
              ),
            ),
          );