如何围绕指定点旋转Widget？以锁定底部点旋转箭头Widget为例

要让箭头围绕底部点旋转，核心是修改Transform.rotate的alignment参数，将旋转原点从中心改为箭头底部。

修改后的代码 #

widgetForInnerWidget: Center(
  child: Transform.rotate(
    // 将旋转原点设为底部中心
    alignment: Alignment.bottomCenter,
    angle: 0, // 可根据需求调整角度范围：最大2.4，最小-1.6
    child: Transform.scale(
      scale: 2.3,
      child: SvgPicture.asset(
        'assets/images/arrow.svg',
        colorFilter: ColorFilter.mode(
          Theme.of(context).color.special,
          BlendMode.srcIn,
        ),
      ),
    ),
  ),
)

关键说明 #

• Alignment.bottomCenter等价于FractionalOffset(0.5, 1.0)，表示以Widget的底部中心作为旋转支点，正好对应箭头的底部位置。
• 如果你的SVG中箭头底部并非严格对应Widget的底部中心，可以自定义Alignment的偏移值，比如Alignment(0.5, 1.2)来微调支点位置，确保旋转时底部点完全锁定。

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