如何让Flutter Container从左侧调整宽度而非默认右侧？

默认情况下Flutter的Container调整宽度时会从右侧缩放，要实现从左侧伸缩且无需添加位置动画，可以通过调整容器的对齐方式来实现，以下是两种简便方案：

方案1：使用Align组件包裹 #

将Container放在Align中，并设置对齐方式为Alignment.centerRight，这样容器会始终靠父组件右侧布局，宽度变化时自然从左侧扩展/收缩：

Align(
  alignment: Alignment.centerRight,
  child: Container(
    width: dx, // dx为可变宽度变量
    height: 200,
    color: Colors.blue,
  ),
)

方案2：使用Row组件布局 #

利用Row的mainAxisAlignment: MainAxisAlignment.end让容器靠右，同样能实现左侧伸缩效果：

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  mainAxisSize: MainAxisSize.max,
  children: [
    Container(
      width: dx,
      height: 200,
      color: Colors.blue,
    ),
  ],
)

原理说明 #

默认布局中Container的基准点在左上角，宽度变化时会向右延伸。通过将容器对齐到父组件右侧，布局系统会自动调整容器的位置，使宽度增减时从左侧发生变化，完全不需要额外的位置动画逻辑。

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