Flutter/Dart中如何实现两个堆叠图标的垂直水平居中？

问题原因 #

你当前的代码里，SizedBox没有指定宽高，它会自动收缩到子组件的最小尺寸，导致外层的Center无法起到居中作用。加上Marker组件的渲染约束，最终两个图标会默认对齐到左上角。

修复方案 #

给SizedBox明确设置宽高（和外层图标的尺寸一致即可），同时保留Stack的alignment: Alignment.center，就能让两个图标完美居中堆叠：

Marker toStackedIconsMarker() {
  return Marker(
      point: LatLng(mapPosition.latitude, mapPosition.longitude),
      builder: (context) => SizedBox(
            width: 50, // 和外层图标的size保持一致
            height: 50,
            child: Stack(
              alignment: Alignment.center,
              children: const [
                Icon(Icons.circle_outlined, size: 50, color: Colors.white),
                Icon(Icons.radio_button_checked, size: 10, color: Colors.white),
              ],
            ),
          ));
}

更简洁的写法 #

如果不需要额外的尺寸限制，也可以直接去掉SizedBox和Center，让Stack直接作为Marker的builder子组件，Stack会自动匹配外层图标的尺寸，结合alignment: Alignment.center就能实现居中堆叠：

Marker toStackedIconsMarker() {
  return Marker(
      point: LatLng(mapPosition.latitude, mapPosition.longitude),
      builder: (context) => Stack(
            alignment: Alignment.center,
            children: const [
              Icon(Icons.circle_outlined, size: 50, color: Colors.white),
              Icon(Icons.radio_button_checked, size: 10, color: Colors.white),
            ],
          ));
}

内容的提问来源于stack exchange，提问作者rockson