Flutter中如何实现一个容器覆盖另一个容器？

目标效果 #

一条灰色水平分割线，中间有一个旋转45度的蓝色菱形（正方形旋转后）作为分割线断点。

实际效果 #

旋转后的蓝色容器角度、位置不符合预期，未达到设计效果。

尝试的代码 #

Stack(
  fit: StackFit.passthrough,
  children: [
    Container(height: 2, color: Colors.grey),
    Positioned(
      child: Center(
        child: Transform.rotate(
          alignment: Alignment.center,
          angle: 45,
          child: Container(
            height: 18,
            width: 18,
            color: colorController.primaryColor.value,
          ),
        ),
      ),
    ),
  ],
),

解决方案 #

问题核心两点：

1. Transform.rotate的angle参数要求传入弧度值，原代码误用了角度值，45度对应的弧度为pi/4（需导入dart:math）。
2. 多余的Positioned组件导致布局定位异常，直接用Center即可让旋转容器居中覆盖分割线。

修改后的代码：

import 'dart:math';

// ...

Stack(
  children: [
    Container(height: 2, color: Colors.grey),
    Center(
      child: Transform.rotate(
        alignment: Alignment.center,
        angle: pi / 4, // 45度对应的弧度值
        child: Container(
          height: 18,
          width: 18,
          color: colorController.primaryColor.value,
          margin: const EdgeInsets.symmetric(horizontal: 8), // 可选：增加边距让两侧分割线更明显
        ),
      ),
    ),
  ],
),

内容的提问来源于stack exchange，提问作者Mou Rani Biswas